Search results

Defer Layout Update in ASP.NET MVC Pivot Grid control

21 Oct 2021 / 1 minute to read

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
Copied to clipboard
@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()
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Stand-alone Field List (Fixed)

razor
Static.cs
Copied to clipboard
@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>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}