Refresh the field list while change the data source

17 Feb 20222 minutes to read

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

@using Syncfusion.EJ2.PivotView


@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false).EnableSorting(true).AllowLabelFilter(true).AllowValueFilter(true)
.FormatSettings(formatsettings => 
{ 
    formatsettings.Name("Amount").Format("C0").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(); 
})).ShowFieldList(true).Render()

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