Search results

Drill Operation

Expand All

Pivot Grid allows you to either expand or collapse all headers that are displayed in rows and columns using expandAll property. To display Pivot Grid with all headers at collapsed state, set the property expandAll to false.

By default, all headers in rows and columns are in expanded state.

tagHelper
ExpandAll.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Drill Up/Down

Also, you can expand/collapse specific header(s) in each fields under row and column using the drilledMembers property through code behind. The settings required to expand/collapse specific header(s) during initial rendering are:

  • name: It allows to set the field name, whose members needs to be drilled.
  • items: It allows to set the members which needs to be drilled.

The drilledMembers option always work in vice-versa manner with respect to the property expandAll in Pivot Grid. For example, if expandAll is set to true, then the drilledMembers will be set in collapsed state.

tagHelper
DrilledMembers.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-drilledmembers>
            <e-field name="Country" items="@ViewBag.drilledMembers"></e-field>
        </e-drilledmembers>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasource>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    ViewBag.drilledMembers = new string[] { "France" };
    return View();
}