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)

tagHelper
DeferUpdate.cs
<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>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Stand-alone Field List (Fixed)

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