Search results

Grouping

Grouping data is the most-useful features in pivot table and the component automatically groups date, time and numbers. The date type can be formatted and displayed based on year, quarter, month, and more. The number type can be grouped range-wise, such as 1-5, 6-10, etc. These group fields will act as individual fields and allows users to drag them between different axes such as columns, rows, values, and filters and create pivot table 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 PivotViewGroupSettings class through code-behind. The properties required are:

  • Name: Allows user to set the field name.

  • GroupInterval: Allows user to set interval in year, quarter, month, day, hour, minute, or second pattern.

  • Type: Allows user to set the group type. For date grouping, GroupType.Date is set.

From the date format “YYYY-DD-MM HH:MM:SS”, if user wants to display only month and date, then the GroupInterval property should be set with DateGroup.Months and DateGroup.Days alone. Also, user can shuffle the order of year, quarter, month, day, hour, minute, or second based on their requirement and display the same in the pivot table.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails" ShowGroupingBar="true">
        <PivotViewDataSourceSettings DataSource="@data">
            <PivotViewColumns>
                <PivotViewColumn Name="Id" Caption="ID"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Date" Caption="Date"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="ProCost" Caption="Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Date" Type="date" Format="dd/MM/yyyy-hh:mm a"></PivotViewFormatSetting>
                <PivotViewFormatSetting Name="ProCost" Format="C" UseGrouping=true></PivotViewFormatSetting>
            </PivotViewFormatSettings>
            <PivotViewGroupSettings>
                <PivotViewGroupSetting Name="Date" Type=GroupType.Date GroupInterval="@groupInterval"></PivotViewGroupSetting>
            </PivotViewGroupSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<DateGroup> groupInterval = new List<DateGroup> {
            DateGroup.Years,
            DateGroup.Months,
            DateGroup.Days
        };
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
    }

output

Number grouping

Number grouping allows users to organize data, which is in number format. Number grouping can be configured using the PivotViewGroupSettings class through code-behind. The properties required are:

  • Name: Allows user to set the field name.
  • RangeInterval: Allows user to set the interval between two numbers.
  • StartingAt: Allows user to set the starting number.
  • EndingAt: Allows user to set the ending number.
  • Type: Allows user to set the group type. For number grouping, GroupType.Number is set.

If starting and ending numbers specified in StartingAt and EndingAt properties are in-between the number range, then rest of the numbers will be grouped and placed in “Out of Range” column introduced specific to this feature.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails" ShowGroupingBar="true">
        <PivotViewDataSourceSettings DataSource="@data">
            <PivotViewColumns>
                <PivotViewColumn Name="Id" Caption="ID"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Date" Caption="Date"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="ProCost" Caption="Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Date" Type="date" Format="dd/MM/yyyy-hh:mm a"></PivotViewFormatSetting>
                <PivotViewFormatSetting Name="ProCost" Format="C" UseGrouping=true></PivotViewFormatSetting>
            </PivotViewFormatSettings>
            <PivotViewGroupSettings>
                <PivotViewGroupSetting Name="Date" Type=GroupType.Date GroupInterval="@groupInterval"></PivotViewGroupSetting>
                <PivotViewGroupSetting Name="Id" Type=GroupType.Number RangeInterval=10 StartingAt="@start"  EndingAt="@end"></PivotViewGroupSetting>
            </PivotViewGroupSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<DateGroup> groupInterval = new List<DateGroup> {
            DateGroup.Years,
            DateGroup.Months,
            DateGroup.Days
        };
        public string start = "1004";
        public string end = "1020";
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
    }

output