Search results

Defer Layout Update in ASP.NET Core 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)

tagHelper
DeferUpdate.cs
Copied to clipboard
<ejs-pivotview id="PivotGrid" height="300" showFieldList="true" allowDeferLayoutUpdate="true">
    <e-datasource data="@ViewBag.data" expandAll="false" enableSorting="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="Production 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>
Copied to clipboard
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Stand-alone Field List (Fixed)

tagHelper
Static.cs
Copied to clipboard
<ejs-pivotview id="PivotGrid" enginePopulated="onGridEnginePopulate" height="300" allowDeferLayoutUpdate="true"></ejs-pivotview>
<br />
<ejs-pivotfieldlist id="Static_FieldList" renderMode="Fixed" allowDeferLayoutUpdate="true" enginePopulated="onFieldListEnginePopulate">
    <e-datasource data="@ViewBag.data" expandAll="false" enableSorting="true">
        <e-fieldlist-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-fieldlist-formatsettings>
        <e-fieldlist-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-fieldlist-rows>
        <e-fieldlist-columns>
            <e-field name="Year" caption="Production Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-fieldlist-columns>
        <e-fieldlist-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-fieldlist-values>
    </e-datasource>
</ejs-pivotfieldlist>

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