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