Search results

Grouping

Grouping data is the most-useful features in PivotGrid. The PivotGrid can automatically group dates, times, and numbers, so the date type can be formatted and displayed based on year, quarter, month, and more. The number type can be grouped in range-wise, such as 1-5, 6-10, etc. These group fields will act as other fields and allows users to drag fields between different axes such as columns, rows, values, and filters and create pivot views at runtime.

Date grouping

Date grouping allows users to organize data, which is in date format into different sections such as years, quarters, months, days, hours, minutes, and seconds. Date grouping can be configured using the groupSettings option through code-behind. The settings required to filter at initial rendering are:

  • name: Allows you to set the field name.
  • groupInterval: Allows you to set group interval to the date field.
  • startingAt: Allows you to set the starting date to group date field.
  • endingAt: Allows you to set the end date to group date field.
  • type: Allows you to set the field type. For example, date-formatted fields should be in “Date” type.
tagHelper
DateGroup.cs
<ejs-pivotview id="PivotGrid" height="300" showGroupingBar="true">
    <e-datasource data="@ViewBag.data" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0"></e-field>
            <e-field name="Sold" format="N0"></e-field>
            <e-field name="Date" type="date" format="dd/MM/yyyy-hh:mm a"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Date"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Product_ID" caption="Product ID"></e-field>
            <e-field name="Products"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Unit Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
        <e-groupsettings>
            <e-field name="Date" type="Date" groupInterval="@(new List<string>() { "Years", "Months", "Days" })" startingAt="new DateTime(2015, 2, 7)", endingAt="new DateTime(2018, 1, 12)"></e-field>
        </e-groupsettings>
    </e-datasource>
    <e-gridSettings columnWidth="140" beforeColumnsRender="beforeColumnsRender"></e-gridSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetGroupData();
    ViewBag.data = data;
    return View();
}

Number grouping

Number grouping allows users to organize data, which is in number format. Number grouping can be configured using the groupSettings option through code-behind. The settings required to filter at initial rendering are:

  • name: Allows you to set the field name.
  • rangeInterval: Allows you to set group interval to the number field.
  • startingAt: Allows you to set the starting date to group number field.
  • endingAt: Allows you to set the end date to group number field.
  • type: Allows you to set the field type. For example, number formatted fields should be in “Number” type.
tagHelper
NumberGroup.cs
<ejs-pivotview id="PivotGrid" height="300" showGroupingBar="true">
    <e-datasource data="@ViewBag.data" expandAll="false" enableSorting="true">
        <e-formatsettings>
            <e-field name="Amount" format="C0"></e-field>
            <e-field name="Sold" format="N0"></e-field>
            <e-field name="Date" type="date" format="dd/MM/yyyy-hh:mm a"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Date"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Product_ID" caption="Product ID"></e-field>
            <e-field name="Products"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Unit Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
        <e-groupsettings>
            <e-field name="Date" type="Date" groupInterval="@(new List<string>() { "Years", "Months", "Days" })" startingAt="new DateTime(2015, 2, 7)", endingAt="new DateTime(2018, 1, 12)"></e-field>
            <e-field name="Product_ID" type="Number" rangeInterval=2 startingAt=1002, endingAt=1008></e-field>
        </e-groupsettings>
    </e-datasource>
    <e-gridSettings columnWidth="140" beforeColumnsRender="beforeColumnsRender"></e-gridSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetGroupData();
    ViewBag.data = data;
    return View();
}