Refresh the field list while change the data source

17 Feb 20223 minutes to read

You can refresh pivot table and field list with new data source dynamically.

<ejs-button id="Refresh" content="Refresh" isPrimary="true"></ejs-button>

<ejs-pivotview id="PivotGrid" height="300" showFieldList="true">
    <e-datasource data="@ViewBag.DataSource" expandAll="false" enableSorting="true" allowLabelFilter="true" allowValueFilter="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-datasource>
</ejs-pivotview>

<script>
    var pivotGridObj;
    document.getElementById('Refresh').addEventListener('click', () => {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        pivotGridObj.engineModule.fieldList = {};
        pivotGridObj.dataSourceSettings.dataSource = [
            { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Year': 'FY 2015' },
            { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Year': 'FY 2015' },
            { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Year': 'FY 2015' },
            { 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Year': 'FY 2015' },
            { 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Year': 'FY 2016' }];
    });
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}