Search results

Drill Through in ASP.NET Core Pivot Table control

Allows to view the underlying raw data of a summarized cell in the pivot table. It can be enabled by setting the allowDrillThrough property to true. By double-clicking on any value cell, user can view the detailed raw data in a data grid inside a new window. In the new window, row header, column header and measure name of the clicked cell will be shown at the top. Also, user can include or exclude fields available in the data grid using column chooser option.

tagHelper
DrillThrough.cs
<ejs-pivotview id="PivotView" height="300" allowDrillThrough="true" showTooltip="false">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="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-datasourcesettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

output

Users can also view the underlying raw data though the pivot chart. By clicking on any data point, user can view the detailed raw data in a data grid inside a new window.

tagHelper
DrillThroughChart.cs
<ejs-pivotview id="PivotView" height="300" allowDrillThrough="true" showTooltip="false">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="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-datasourcesettings>
    <e-chartSettings>
        <e-chartSeries type="Column"></e-chartSeries>
    </e-chartSettings>
    <e-displayOption view="Chart"></e-displayOption>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

output

Maximum rows to retrieve

This property is applicable only for OLAP data sources.

The maxRowsInDrillThrough property allows to specify the maximum number of raw data to be returned during the drill through process. By default, this property is set to “10000” meaning that if you do not specify this property, you will get 10,000 or less raw data.

tagHelper
<ejs-pivotview id="pivotview" allowCalculatedField="true" showFieldList="true" showGroupingBar="true" width="100%" height="600" allowDrillThrough="true" maxRowsInDrillThrough="10">
    <e-datasourcesettings catalog="Adventure Works DW 2008 SE" cube="Adventure Works" url="https://bi.syncfusion.com/olap/msmdpump.dll" providerType="SSAS" enableSorting="true">
        <e-rows>
            <e-field name="[Customer].[Customer Geography]" caption="Customer Geography"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="[Product].[Product Categories]" caption="Product Categories"></e-field>
            <e-field name="[Measures]" caption="Measures"></e-field>
        </e-columns>
        <e-values>
            <e-field name="[Measures].[Customer Count]" caption="Customer Count"></e-field>
            <e-field name="[Measures].[Internet Sales Amount]" caption="Internet Sales Amount"></e-field>
            <e-field name="Order on Discount" isCalculatedField="true"></e-field>
        </e-values>
        <e-filters>
            <e-field name="[Date].[Fiscal]" caption="Date Fiscal"></e-field>
        </e-filters>
        <e-filtersettings>
            <e-field name="[Date].[Fiscal]" items="@ViewBag.filterMembers" levelCount=3></e-field>
        </e-filtersettings>
        <e-calculatedfieldsettings>
            <e-field name="BikeAndComponents" formula="([Product].[Product Categories].[Category].[Bikes] + [Product].[Product Categories].[Category].[Components])" hierarchyUniqueName="[Product].[Product Categories]" formatString="Standard"></e-field>
            <e-field name="Order on Discount" formula="[Measures].[Order Quantity] + ([Measures].[Order Quantity] * 0.10)" formatString="Currency"></e-field>
        </e-calculatedfieldsettings>
    </e-datasourcesettings>
</ejs-pivotview>

output

Events

DrillThrough

The event drillThrough triggers every time before a value cell is double clicked. This event allows user to customize the data grid columns in drill through popup. Exclusively the event helps to view and process the raw data information behind a aggregated value inside value cell. It has the following parameters:

  • columnHeaders - It holds column header of the current cell.
  • currentCell - It holds the current cell’s information.
  • currentTarget - It holds current cell’s html element.
  • gridColumns - It holds data grid columns to be rendered in drill through popup.
  • rawData - It holds current cell’s raw data.
  • rowHeaders - It holds row header of current cell.
  • value - It holds value of current cell.
  • cancel - It is a boolean property and by setting this to true, dialog won’t be created.
tagHelper
DrillThroughEvent.cs
<ejs-pivotview id="PivotView" height="300" allowDrillThrough="true" drillThrough="drillThrough" showTooltip="false">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="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-datasourcesettings>
</ejs-pivotview>

<script>
    function drillThrough(args) {
        //triggers on value cell double click
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

BeginDrillThrough

The event beginDrillThrough occurs for each and every value cell with a double click, and the event argument provides the data grid information before the drill-through popup is shown. User can access the data grid (which holds the raw data underneath the aggregated value cell) options such as sort, group, filter and customize those in the data grid. It has the following parameters:

  • gridObj - It holds the data grid instance to be rendered inside the drill-through popup.
  • cellInfo - It holds current cell information like raw data, row header, column header and value.
tagHelper
CustomEditing.cs
<ejs-pivotview id="PivotView" height="300" beginDrillThrough="beginDrillThrough" showTooltip="false">
    <e-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal"></e-editSettings>
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="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-datasourcesettings>
</ejs-pivotview>

<script>
    function beginDrillThrough(args) {
        if (args.gridObj) {
            var gridObj = args.gridObj;
            gridObj.allowGrouping = true;
            gridObj.allowSorting = true;
            gridObj.allowFiltering = true;
            gridObj.filterSettings = { type: 'CheckBox' };
        }
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}