All documentation
  • Expand and drill the data

    This guide explains:

    • How to expand and collapse inner field values in Flexmonster when multiple fields are placed in rows or columns.
    • How to drill up and down the data stored as a multilevel hierarchy.

    Expanding the data

    When multiple fields are placed in rows or columns, all nodes are collapsed by default. As a result, only summarized data is shown until you expand the nodes. Learn how to expand the data and see more details.

    Expand a specific node

    In the report

    If you want to preset expanded members in your report, we recommend the following approach:

    1. Configure expands via the UI.
    2. Save the report.

    Your report will now contain the info about expanded fields in the slice.expands property. If needed, you can edit this configuration programmatically.

    Using the API

    You can expand a specific node using the expandCell() API call:

    pivot.expandCell("rows", ["Accessories", "Canada"]);

    Live example

    To collapse a specific node, use the collapseCell() API call.

    Expand all nodes of the specified field using the expandData() API call:

    pivot.expandData("Country");

    Live example

    To collapse all nodes of the specified files, use the collapseData() API call.

    Note expandData() and collapseData() works only for the CSV and JSON data sources.

    Via the UI

    Expand or collapse a member’s inner field values by clicking the arrow icon to the left of the member's name:

    Slice: expands configured

    Expand data only in rows or columns

    In the report

    You can expand data only in rows or columns using the slice.expands.expandAllRows or slice.expands.expandAllColumns property, respectively:

    slice: {
    expands: {
    expandAllRows: true
    },
    // Other slice configs
    }

    Using the API

    To expand data only in rows or columns, call the expandAllData() with the specified type parameter:

    pivot.expandAllData("rows");

    Expand all data

    In the report

    To expand all data nodes at once, set the slice.expands.expandAll property to true:

    slice: {
    expands: {
    expandAll: true
    },
    // Other slice configs
    }

    Using the API

    To expand all data nodes at once, use the expandAllData() API call:

    pivot.expandAllData();

    Live example

    Note If your slice has a lot of nested levels, expandAllData() can lead to excessive memory consumption and instability.

    To collapse all data nodes at once, use the collapseAllData() API call.

    Drilling the data

    If you have the multilevel hierarchies configured, only the first level is visible on the screen by default. Learn how to drill the data and see more details.

    Drill down a specific cell

    In the report

    If you want to preset drills in your report, we recommend the following approach:

    1. Configure drills via the UI.
    2. Save the report

    Your report will now contain the info about the drilled fields in the slice.drills property. If needed, you can edit this configuration programmatically.

    Using the API

    You can drill down the cell using the drillDownCell() API call:

    pivot.drillDownCell("columns", [], null, "2021");

    Live example

    To drill up the cell, use the drillUpCell() API call.

    Via the UI

    Drill up and down multilevel hierarchies by clicking a link next to the member name:

    Slice: multilevel hierarchies configured

    Drill down cells only in rows or columns

    You can drill down multilevel hierarchies only in rows or columns using the slice.drills.drillAllRows or slice.drills.drillAllColumns property, respectively. These properties work only when the slice.expands.expandAll property is to true:

    slice: {
    expands: {
    expandAll: true,
    },
    drills: {
    drillAllColumns: true,
    },
    // Other slice configs
    }

    Drill down all data

    To drill down all multilevel hierarchies at once, set the slice.drills.drillAll to true. This property works only when the slice.expands.expandAll property is to true:

    slice: {
    expands: {
    expandAll: true,
    },
    drills: {
    drillAll: true,
    },
    // Other slice configs
    }

    Live example

    See also