Toolbar in ASP.NET Core Pivot Table control

ASP.NET Core

Search results

Toolbar option allows to access the frequently used features like switching between pivot table and pivot chart, changing chart types, conditional formatting, exporting, etc… with ease at runtime. This option can be enabled by setting the showToolbar property in ejs-pivotview tag to true. The toolbar property in ejs-pivotview tag accepts the collection of built-in toolbar options.

The following table shows built-in toolbar options and its actions.

Built-in Toolbar Options	Actions
New	Creates a new report
Save	Saves the current report
Save As	Save as current report
Rename	Renames the current report
Delete	Deletes the current report
Load	Loads any report from the report list
Grid	Shows pivot table
Chart	Shows a chart in any type from the built-in list and option to enable/disable multiple axes
Exporting	Exports the pivot table as PDF/Excel/CSV and the pivot chart as PDF and image
Sub-total	Shows or hides sub totals
Grand Total	Shows or hides grand totals
Conditional Formatting	Shows the conditional formatting pop-up to apply formatting
Number Formatting	Shows the number formatting pop-up to apply number formatting
Field List	Shows the fieldlist pop-up
MDX	Shows the MDX query that was run to retrieve data from the OLAP data source. NOTE: This applies only to the OLAP data source.

The order of toolbar options can be changed by simply moving the position of items in the ToolbarItems collection. Also if end user wants to remove any toolbar option from getting displayed, it can be simply ignored from adding into the ToolbarItems collection.

tagHelper

Toolbar.cs

<ejs-pivotview id="pivotview" allowExcelExport="true" allowNumberFormatting="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="100%" height="300" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load",
"Grid", "Chart", "Export", "SubTotal", "GrandTotal", "ConditionalFormatting", "NumberFormatting", "FieldList" })" saveReport="saveReport" loadReport="loadReport" fetchReport="fetchReport" renameReport="renameReport" removeReport="removeReport" newReport="newReport">
    <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"></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-gridSettings columnWidth="140"></e-gridSettings>
    <e-displayOption view="Both"></e-displayOption>
</ejs-pivotview>
<style>
    #pivotview {
        width: 100%;
        height: 100%;
    }

    .e-tool-expand::before {
        content: '\e702';
    }
</style>
<script>

    function saveReport(args) {
        var reports = [];
        var isSaved = false;
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reports = JSON.parse(localStorage.pivotviewReports);
        }
        if (args.report && args.reportName && args.reportName !== '') {
            reports.map(function (item) {
                if (args.reportName === item.reportName) {
                    item.report = args.report;
                    isSaved = true;
                }
            });
            if (!isSaved) {
                reports.push(args);
            }
            localStorage.pivotviewReports = JSON.stringify(reports);
        }
    }
    function fetchReport(args) {
        var reportCollection = [];
        var reeportList = [];
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reportCollection = JSON.parse(localStorage.pivotviewReports);
        }
        reportCollection.map(function (item) {
            reeportList.push(item.reportName);
        });
        args.reportName = reeportList;
    }
    function loadReport(args) {
        var pivotObj = document.getElementById('pivotview').ej2_instances[0];
        var reportCollection = [];
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reportCollection = JSON.parse(localStorage.pivotviewReports);
        }
        reportCollection.map(function (item) {
            if (args.reportName === item.reportName) {
                args.report = item.report;
            }
        });
        if (args.report) {
            pivotObj.dataSourceSettings = JSON.parse(args.report).dataSourceSettings;
        }
    }
    function removeReport(args) {
        var reportCollection = [];
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reportCollection = JSON.parse(localStorage.pivotviewReports);
        }
        for (var i = 0; i < reportCollection.length; i++) {
            if (reportCollection[i].reportName === args.reportName) {
                reportCollection.splice(i, 1);
            }
        }
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            localStorage.pivotviewReports = JSON.stringify(reportCollection);
        }
    }
    function renameReport(args) {
        var reportCollection = [];
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reportCollection = JSON.parse(localStorage.pivotviewReports);
        }
        reportCollection.map(function (item) {
            if (args.reportName === item.reportName) {
                item.reportName = args.rename;
            }
        });
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            localStorage.pivotviewReports = JSON.stringify(reportCollection);
        }
    }
    function newReport() {
        var pivotObj = document.getElementById('pivotview').ej2_instances[0];
        pivotObj.setProperties({
            dataSourceSettings: {
                columns: [],
                rows: [],
                values: [],
                filters: []
            }
        }, false);
    }
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

By default, all chart types are displayed in the dropdown menu included in the toolbar. However, based on the request for an application, we may need to show selective chart types on our own. This can be achieved using the chartTypes property. To know more about supporting chart types, click here.

tagHelper

Toolbar.cs

<ejs-pivotview id="pivotview" width="100%" height="300" toolbar="@(new List<string>() {
  "Grid", "Chart" })" chartTypes="@(new List<string>(){"Column", "Bar", "Line", "Area"})">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" 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"></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-displayOption view="Both"></e-displayOption>
</ejs-pivotview>
<style>
    #pivotview {
        width: 100%;
        height: 100%;
    }

    .e-tool-expand::before {
        content: '\e702';
    }
</style>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

Switch the chart to multiple axes

In the chart, the user can switch from single axis to multiple axes with the help of the built-in checkbox available inside the chart type dropdown menu in the toolbar. For more information refer here.

output

Show or hide legend

In the chart, legend can be shown or hidden dynamically with the help of the built-in option available in the chart type drop-down menu.

By default, the legend is not be visible for the accumulation chart types like pie, doughnut, pyramid, and funnel. Users can enable or disable using the built-in checkbox option.

output

In addition to the existing built-in toolbar items, new toolbar item(s) may also be included. This can be achieved by using the toolbarRender event. The action of the new toolbar item(s) can also be defined within this event.

The new toolbar item(s) can be added to the desired position in the toolbar using the splice option.

tagHelper

ToolbarCustomize.cs

<ejs-pivotview id="pivotview" showToolbar="true"  width="100%" height="300" toolbar="@(new List<string>() {"Expand/Collapse" })" toolbarRender="beforeToolbarRender">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" 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"></e-field>
            <e-field name="Order_Source" caption="Order Source"></e-field>
        </e-columns>
        <e-values>
            <e-field name="In_Stock" caption="In Stock"></e-field>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
        <e-filters>
            <e-field name="Product_Categories" caption="Product Categories"></e-field>
        </e-filters>
    </e-datasourcesettings>
    <e-gridSettings columnWidth="140"></e-gridSettings>
    <e-displayOption view="Both"></e-displayOption>
</ejs-pivotview>
<style>
    #pivotview {
        width: 100%;
        height: 100%;
    }

    .e-tool-expand::before {
        content: '\e702';
    }
</style>
<script>
    function beforeToolbarRender(args) {
        args.customToolbar.splice(12, 0, {
                prefixIcon: 'e-tool-expand e-icons', tooltipText: 'Expand/Collapse',
                click: function (args: ClickEventArgs) {
                    var pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
                    pivotTableObj.dataSourceSettings.expandAll = !pivotTableObj.dataSourceSettings.expandAll;
                },
        });
    }
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

In the above topic, we have seen how to add an icon as one of the toolbar item in toolbar panel. In the next topic, we are going to see how to frame the entire toolbar panel and how to add a custom control in it.

It allows to customize the toolbar panel by using template option. It allows any custom control to be used as one of the toolbar item inside the toolbar panel. It can be achieved by two ways, Here, the entire toolbar panel can be framed in HTML elements that are appended at the top of the pivot table. The id of the HTML element needs to be set in the toolbarTemplate property in-order to map it to the pivot table.

tagHelper

ToolbarCustomize.cs

<div id="template">
        <div>
            <div><ejs-button id="expandbtn" content="Expand All" cssClass="e-flat" isPrimary="true"></ejs-button></div>
            <div><ejs-button id="collapsebtn" content="Collapse All" cssClass="e-flat" isPrimary="true"></ejs-button></div>
        </div>
    </div>
<ejs-pivotview id="pivotview" showToolbar="true" width="100%" height="300" toolbarTemplate="#template">
    <e-datasourcesettings dataSource="@ViewBag.DataSource">
        <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"></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-gridSettings columnWidth="140"></e-gridSettings>
</ejs-pivotview>

<style>
    .e-tool-expand::before {
        content: '\e702';
    }
</style>

<script>
    document.getElementById("expandbtn").addEventListener('click', function () {
        var pivotObj = document.getElementById("pivotview").ej2_instances[0];
        pivotObj.dataSourceSettings.expandAll = true;
    });
    document.getElementById("collapsebtn").addEventListener('click', function () {
        var pivotObj = document.getElementById("pivotview").ej2_instances[0];
        pivotObj.dataSourceSettings.expandAll = false;
    });
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

Another option allows to frame a custom toolbar item using HTML elements and include in the toolbar panel at the desired position. The custom toolbar items can be declared as control instance or element id in the toolbar property in pivot table.

tagHelper

ToolbarCustomize.cs

@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add(new { template = "#enablertl" });
    toolbarItems.Add(new { template = "#disablertl" });
}
<ejs-button id="enablertl" content="ENABLE RTL" cssClass="e-flat" isPrimary="true"></ejs-button>
<ejs-button id="disablertl" content="DISABLE RTL" cssClass="e-flat" isPrimary="true"></ejs-button>
<ejs-pivotview id="pivotview" showToolbar="true" width="100%" height="300" toolbar=toolbarItems>
    <e-datasourcesettings dataSource="@ViewBag.DataSource">
        <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"></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-gridSettings columnWidth="140"></e-gridSettings>
</ejs-pivotview>

<style>
    .e-tool-expand::before {
        content: '\e702';
    }
</style>

<script>
    document.getElementById("enablertl").addEventListener('click', function () {
        var pivotObj = document.getElementById("pivotview").ej2_instances[0];
        pivotObj.enableRtl = true;
    });
    document.getElementById("disablertl").addEventListener('click', function () {
        var pivotObj = document.getElementById("pivotview").ej2_instances[0];
        pivotObj.enableRtl = false;
    });
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

Note: For both options, the actions for the toolbar template items can be defined in the event toolbarClick. Also, if the toolbar item is a custom control then its built-in events can also be accessed.

Save and load report as a JSON file

The current pivot report can be saved as a JSON file in the desired path and loaded back to the pivot table at any time.

tagHelper

save-load-json.cs

<ejs-pivotview id="pivotview" width="100%" height="300" dataBound="ondataBound">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" 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"></e-field>
            <e-field name="Order_Source" caption="Order Source"></e-field>
        </e-columns>
        <e-values>
            <e-field name="In_Stock" caption="In Stock"></e-field>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
        <e-filters>
            <e-field name="Product_Categories" caption="Product Categories"></e-field>
        </e-filters>
    </e-datasourcesettings>
    <e-gridSettings columnWidth="140"></e-gridSettings>
</ejs-pivotview>
<a id="save" class="btn btn-primary">Save</a><div class="fileUpload btn btn-primary"><span>Load</span><input id="files" type="file" class="upload" /></div>
<style>
    #pivotview {
        width: 100%;
        height: 100%;
    }

    .fileUpload {
        position: relative;
        overflow: hidden;
        margin: 10px;
    }

    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }
</style>
<script>
    function ondataBound(args) {
        var pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
        var dataSource = JSON.parse(pivotTableObj.getPersistData()).dataSourceSettings.dataSource;
        var a = document.getElementById('save');
        var mime_type = 'application/octet-stream'; // text/html, image/png, et c
        a.setAttribute('download', 'pivot.JSON');
        a.href = 'data:'+ mime_type +';base64,'+ btoa(JSON.stringify(dataSource) || '');
        document.getElementById('files').addEventListener('change', readBlob, false);
    }

    function readBlob(args) {
        var files = document.getElementById('load').files;
        var file = files[0];
        var start = 0;
        var stop = file.size - 1;
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            if (evt.target.readyState == FileReader.DONE) {
                var pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
                pivotTableObj.dataSource = JSON.parse(evt.target.result);
            }
        };
        var blob = file.slice(start, stop + 1);
        reader.readAsBinaryString(blob);
    }
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Events

FetchReport

The event fetchReport is triggered when dropdown list is clicked in the toolbar in-order to retrieve and populate saved reports. It has following parameter - reportName. This event allows user to fetch the report names from local storage and populate the dropdown list.

LoadReport

The event loadReport is triggered when a report is selected from the dropdown list in the toolbar. It has following parameters - report and reportName. This event allows user to load the selected report to the pivot table.

NewReport

The event newReport is triggered when the new report icon is clicked in the toolbar. It has following parameter - report. This event allows user to create new report and add to the report list.

RenameReport

The event renameReport is triggered when rename report icon is clicked in the toolbar. It has following parameters - rename, report and reportName. This event allows user to rename the selected report from the report list.

RemoveReport

The event removeReport is triggered when remove report icon is clicked in the toolbar. It has following parameters - report and reportName. This event allows user to remove the selected report from the report list.

SaveReport

The event saveReport is triggered when save report icon is clicked in the toolbar. It has following parameters - report and reportName. This event allows user to save the altered report to the report list.

tagHelper

Toolbar.cs

<ejs-pivotview id="pivotview" allowExcelExport="true" allowNumberFormatting="true" allowConditionalFormatting="true" allowPdfExport="true" showToolbar="true" allowCalculatedField="true" showFieldList="true" width="100%" height="300" toolbar="@(new List<string>() {"New", "Save", "SaveAs", "Rename", "Remove", "Load",
"Grid", "Chart", "Export", "SubTotal", "GrandTotal", "ConditionalFormatting", "NumberFormatting", "FieldList" })" saveReport="saveReport" loadReport="loadReport" fetchReport="fetchReport" renameReport="renameReport" removeReport="removeReport" newReport="newReport">
    <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"></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-gridSettings columnWidth="140"></e-gridSettings>
    <e-displayOption view="Both"></e-displayOption>
</ejs-pivotview>
<style>
    #pivotview {
        width: 100%;
        height: 100%;
    }

    .e-tool-expand::before {
        content: '\e702';
    }
</style>
<script>

    function saveReport(args) {
        var reports = [];
        var isSaved = false;
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reports = JSON.parse(localStorage.pivotviewReports);
        }
        if (args.report && args.reportName && args.reportName !== '') {
            reports.map(function (item) {
                if (args.reportName === item.reportName) {
                    item.report = args.report;
                    isSaved = true;
                }
            });
            if (!isSaved) {
                reports.push(args);
            }
            localStorage.pivotviewReports = JSON.stringify(reports);
        }
    }
    function fetchReport(args) {
        var reportCollection = [];
        var reeportList = [];
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reportCollection = JSON.parse(localStorage.pivotviewReports);
        }
        reportCollection.map(function (item) {
            reeportList.push(item.reportName);
        });
        args.reportName = reeportList;
    }
    function loadReport(args) {
        var pivotObj = document.getElementById('pivotview').ej2_instances[0];
        var reportCollection = [];
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reportCollection = JSON.parse(localStorage.pivotviewReports);
        }
        reportCollection.map(function (item) {
            if (args.reportName === item.reportName) {
                args.report = item.report;
            }
        });
        if (args.report) {
            pivotObj.dataSourceSettings = JSON.parse(args.report).dataSourceSettings;
        }
    }
    function removeReport(args) {
        var reportCollection = [];
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reportCollection = JSON.parse(localStorage.pivotviewReports);
        }
        for (var i = 0; i < reportCollection.length; i++) {
            if (reportCollection[i].reportName === args.reportName) {
                reportCollection.splice(i, 1);
            }
        }
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            localStorage.pivotviewReports = JSON.stringify(reportCollection);
        }
    }
    function renameReport(args) {
        var reportCollection = [];
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reportCollection = JSON.parse(localStorage.pivotviewReports);
        }
        reportCollection.map(function (item) {
            if (args.reportName === item.reportName) {
                item.reportName = args.rename;
            }
        });
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            localStorage.pivotviewReports = JSON.stringify(reportCollection);
        }
    }
    function newReport() {
        var pivotObj = document.getElementById('pivotview').ej2_instances[0];
        pivotObj.setProperties({
            dataSourceSettings: {
                columns: [],
                rows: [],
                values: [],
                filters: []
            }
        }, false);
    }
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

ToolbarRender

The toolbarRender event is triggered when the toolbar is rendered. It has the customToolbar parameter. This event helps to customize the built-in toolbar items and to include new toolbar item(s).

tagHelper

ToolbarCustomize.cs

<ejs-pivotview id="pivotview" showToolbar="true"  width="100%" height="300" toolbar="@(new List<string>() {"Save", "Export", "FieldList" })" saveReport="saveReport" toolbarRender="beforeToolbarRender">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" 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"></e-field>
            <e-field name="Order_Source" caption="Order Source"></e-field>
        </e-columns>
        <e-values>
            <e-field name="In_Stock" caption="In Stock"></e-field>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
        <e-filters>
            <e-field name="Product_Categories" caption="Product Categories"></e-field>
        </e-filters>
    </e-datasourcesettings>
    <e-gridSettings columnWidth="140"></e-gridSettings>
    <e-displayOption view="Both"></e-displayOption>
</ejs-pivotview>
<style>
    #pivotview {
        width: 100%;
        height: 100%;
    }

    .e-tool-expand::before {
        content: '\e702';
    }
</style>
<script>

    function saveReport(args) {
        var reports = [];
        var isSaved = false;
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
            reports = JSON.parse(localStorage.pivotviewReports);
        }
        if (args.report && args.reportName && args.reportName !== '') {
            reports.map(function (item) {
                if (args.reportName === item.reportName) {
                    item.report = args.report;
                    isSaved = true;
                }
            });
            if (!isSaved) {
                reports.push(args);
            }
            localStorage.pivotviewReports = JSON.stringify(reports);
        }
    }

    function beforeToolbarRender(args) {
         args.customToolbar.splice(2, 0, {
            prefixIcon: 'e-rename-report e-icons', tooltipText: 'Custom Button',
            click: function (args: ClickEventArgs) {
                // Here you can customize the click event for custom button
            },
        });
        args.customToolbar.splice(3, 0, {
            prefixIcon: 'e-tool-expand e-icons', tooltipText: 'Expand/Collapse',
                click: function (args: ClickEventArgs) {
                    var pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
                    pivotTableObj.dataSourceSettings.expandAll = !pivotTableObj.dataSourceSettings.expandAll;
                },
        });
        args.customToolbar[0].align = "Left";
        args.customToolbar[1].align = "Center";
        args.customToolbar[2].align = "Right";
    }
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

Before Export

The pivot table (or) pivot chart can be exported as a pdf, excel, csv etc., document using the toolbar options. And, you can customize the export settings for exporting document by using the beforeExport event in the toolbar.

For example, you can add the header and footer for the pdf document by setting the header and footer properties for the pdfExportProperties in the beforeExport event.

output

Contents

Built-in Toolbar Options
Show desired chart types in the dropdown menu
Switch the chart to multiple axes
Show or hide legend
Adding custom option to the toolbar
Toolbar Template
Save and load report as a JSON file
Events
FetchReport
LoadReport
NewReport
RenameReport
RemoveReport
SaveReport
ToolbarRender
Before Export

Contents

Built-in Toolbar Options
Show desired chart types in the dropdown menu
Switch the chart to multiple axes
Show or hide legend
Adding custom option to the toolbar
Toolbar Template
Save and load report as a JSON file
Events
FetchReport
LoadReport
NewReport
RenameReport
RemoveReport
SaveReport
ToolbarRender
Before Export

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Toolbar in ASP.NET Core Pivot Table control

Built-in Toolbar Options

Show desired chart types in the dropdown menu

Switch the chart to multiple axes

Show or hide legend

Adding custom option to the toolbar

Toolbar Template

Save and load report as a JSON file

Events

FetchReport

LoadReport

NewReport

RenameReport

RemoveReport

SaveReport

ToolbarRender

Before Export