Search results

Pivot Field List

The Pivot Grid provides a built-in Field List similar to Microsoft Excel. It allows you to add or remove fields and also rearrange the fields between different axes, including column, row, value, and filter along with filter and sort options dynamically at runtime.

The field list can be displayed in three different formats to interact with pivot grid. They are:

  • In-built Field List (Popup): To display the field list icon in Pivot Grid UI to invoke the built-in dialog.
  • Stand-alone Field List (Fixed): To display the field list in a static position within a web page.
  • Invoking dynamic Field List (Customized): To display the field list by invoking the built-in dialog independently through other means, for example, on a button click.

In-built Field List (Popup)

To display the field list icon in Pivot Grid UI, you need to set the showFieldList property to true. In order to display the field list dialog, click the field list icon at the top left corner of the Pivot Grid.

The field list icon will be displayed at the top right corner of the Pivot Grid, when grouping bar is enabled.

razor
fieldlist.cs
@Html.EJS().PivotView("PivotGrid").Height("300").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false).EnableSorting(true).AllowLabelFilter(true).AllowValueFilter(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).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Stand-alone Field List (Fixed)

The field list can be rendered in a static position, anywhere in web page layout, like a separate component. To do so, you need to set renderMode property to Fixed.

Moreover, to make field list interact with pivot grid, you need to use the updateView and update methods for data source update in both field list and pivot grid simultaneously.

razor
Static.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Height("300").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").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];
        fieldlistObj.updateView(pivotGridObj);
    }
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Invoking dynamic Field List (Customized)

Also, you can display the field list dialog independently through other means. For example, you can invoke the field list dialog on an external button click. To do so, set renderMode property to Popup and since on button click, field list dialog will be invoked.

  • Meanwhile, you can display the field list dialog at specific target element within a webpage using target property. By default, the target value is null, which refers the document.body element.
  • Moreover, to make field list interact with pivot grid, you need to use the updateView and update methods for data source update in both field list and pivot grid simultaneously.

The below sample code illustrates the field list dialog invoked on an external button click.

razor
Popup.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().Button("fieldlistbtn").Content("Field List").IsPrimary(true).Render()

<div id="Popup_FieldList"></div>

@Html.EJS().PivotView("PivotGrid").Height("300").EnginePopulated("onGridEnginePopulate").Render()

@Html.EJS().PivotFieldList("PivotFieldList").RenderMode(Mode.Popup).Target("#Popup_FieldList").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").Render()

<style>
    .e-toggle-field-list {
        display: none !important;
    }
</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];
        fieldlistObj.updateView(pivotGridObj);
    }
    document.getElementById('fieldlistbtn').onclick = function () {
        fieldlistObj = document.getElementById('PivotFieldList').ej2_instances[0];
        fieldlistObj.dialogRenderer.fieldListDialog.show();
    };
</script>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}