Search results

Defer Layout Update

Defer layout update support allows you to update the pivot table only on demand. To enable deferred updates in the pivot grid, set the property allowDeferLayoutUpdate as true.

Built-in Field List (Pop-up)

The Defer layout update support allows you to update the pivot table only on-demand. To enable Defer layout update in the pivot grid, set the allowDeferLayoutUpdate as true.

In-built Field List (Popup)

razor
DeferUpdate.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Width("100%").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).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("Production Year").Add(); columns.Name("Quarter").Add();
}).Values(values =>
{
values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
})).ShowFieldList(true).AllowDeferLayoutUpdate(true).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Stand-alone Field List (Fixed)

razor
Static.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").AllowDeferLayoutUpdate(true).EnginePopulated("onGridEnginePopulate").Render()
<br />
@Html.EJS().PivotFieldList("Static_FieldList").RenderMode(Mode.Fixed).DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).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("Production Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).EnginePopulated("onFieldListEnginePopulate").AllowDeferLayoutUpdate(true).Render()

<style>
    #Static_FieldList {
        width: 400px;
    }
</style>

<script>
    var pivotGridObj; var fieldlistObj;
    function onGridEnginePopulate(args) {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        fieldlistObj = document.getElementById('PivotFieldList').ej2_instances[0];
        if (fieldlistObj) {
            fieldlistObj.update(pivotGridObj);
        }
    }
    function onFieldListEnginePopulate(args) {
        pivotGridObj = document.getElementById('PivotGrid').ej2_instances[0];
        fieldlistObj = document.getElementById('PivotFieldList').ej2_instances[0];
        if (fieldlistObj.isRequiredUpdate) {
            fieldlistObj.updateView(pivotGridObj);
        }
        pivotGridObj.notify('ui-update', pivotGridObj);
        fieldlistObj.notify('tree-view-update', fieldlistObj);
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}