Search results

Drill Operation in ASP.NET Core Pivot Grid control

21 Oct 2021 / 1 minute to read

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
Copied to clipboard
<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>
Copied to clipboard
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
Copied to clipboard
<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>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    ViewBag.drilledMembers = new string[] { "France" };
    return View();
}