Search results

Grouping Bar

The Grouping Bar option in Pivot Grid automatically populates fields from the bound data source and allows end users to drag fields between different axes such as columns, rows, values, and filters, and create pivot views at runtime. It can be enabled by setting the showGroupingBar property to true.

To use grouping bar, You need to inject the GroupingBar module in pivot grid.

razor
groupingbar.cs
@Html.EJS().PivotView("PivotGrid").Width("100%").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(); 
    })).ShowGroupingBar(true).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

The grouping bar provides some additional options to customize it’s UI using groupingBarSettings property.

Show/hide filter icon

The Grouping Bar has an option to filter members of particular fields at runtime in Pivot Grid. In order to filter members in a field, click the filter icon in the pivot button and check/uncheck the members that needs to be displayed. To disable the filter icon, you need to set showFilterIcon to false.

By default, the filter icon is enabled in the grouping bar.

razor
ShowFilter.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Width("100%").Height("300").GroupingBarSettings( new PivotViewGroupingBarSettings {
ShowFilterIcon =false }).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();
})).ShowGroupingBar(true).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Show/hide sort icon

The Grouping Bar has an option to order members of a particular fields either in ascending or descending at run time. In order to sort a field, click the sort icon available in the respective pivot button. To reverse the sort direction, click the same sort icon again. To disable the sort option, you need to set the showSortIcon to false.

By default, the sort icon is enabled in the grouping bar.

razor
ShowSort.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Width("100%").Height("300").GroupingBarSettings( new PivotViewGroupingBarSettings {
ShowSortIcon =false }).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();
})).ShowGroupingBar(true).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

Show/hide remove icon

In order to filter members in a field, click the filter icon in the pivot button and check/uncheck the members that needs to be displayed. To disable the filter icon, you need to set showFilterIcon to false.

The Grouping Bar has an option to remove a particular field at run time. In order to remove a field, click the remove icon in the pivot button. To disable the remove icon, you need to set the showRemoveIcon to false.

By default, the remove icon is enabled in the grouping bar.

razor
ShowRemove.cs
@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotGrid").Width("100%").Height("300").GroupingBarSettings( new PivotViewGroupingBarSettings {
ShowRemoveIcon =false }).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();
})).ShowGroupingBar(true).Render()
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

See Also