How to configure data grid in ASP.NET MVC Pivot Table editing mode

27 Aug 20262 minutes to read

The ASP.NET MVC Pivot Table component provides the ability to configure various data grid options when working with drill-through functionality in editing mode. When users double-click on value cells (cells containing aggregated data), the component displays the underlying raw data in a drill-through grid popup. The BeginDrillThrough event allows users to access and configure grid features such as sorting, grouping, and filtering before displaying the drill-through grid popup.

Implementation

The BeginDrillThrough event occurs when users double-click on any value cell in the pivot table. This event provides access to the grid instance and its configuration options before displaying the drill-through popup, enabling users to customize the grid behavior according to their requirements.

Grid features are segregated into individual feature-wise modules. For example, to use the sorting feature, the Sort module must be injected using the Grid.Inject(Sort) method.

@Html.EJS().PivotView("PivotView").Width("100%").Height("300").ShowTooltip(false).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false).EnableSorting(true)
 .FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).EditSettings(pivotViewCellEditSettings=>pivotViewCellEditSettings.AllowAdding(true).AllowDeleting(true).AllowEditing(true).Mode(Syncfusion.EJ2.PivotView.EditMode.Normal)).BeginDrillThrough("beginDrillThrough").Render()

<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();
}