# grid-grouping

> Grouped orders grid combines sorting, menu filtering, paging, validation, and toolbar-based add, edit, and delete actions.

**Framework:** blazor  **Component:** Grid  **Variant:** grouping

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/grid-grouping.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Grids
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-grouping/DataSource.cs

```cs
using System;
using System.Collections.Generic;

namespace BlazorDemos.Pages.Grid
{   
    public class Orders
    {
        public Orders()
        {

        }
        public Orders(int OrderID, string CustomerId, int EmployeeId, double Freight, bool Verified, DateOnly OrderDate, TimeOnly OrderTime, string ShipCity, string ShipName, string ShipCountry, DateTime ShippedDate, string ShipAddress)
        {
            this.OrderID = OrderID;
            this.CustomerID = CustomerId;
            this.EmployeeID = EmployeeId;
            this.Freight = Freight;
            this.ShipCity = ShipCity;
            this.Verified = Verified;
            this.OrderDate = OrderDate;
            this.OrderTime = OrderTime;
            this.ShipName = ShipName;
            this.ShipCountry = ShipCountry;
            this.ShippedDate = ShippedDate;
            this.ShipAddress = ShipAddress;
        }
        public static IReadOnlyList<Orders> GetAllRecords()
        {
            List<Orders> orders = new List<Orders>();
            int code = 10000;
            for (int i = 1; i < 15; i++)
            {
                orders.Add(new Orders(code + 1, "ALFKI", i + 0, Math.Round((2.3 * i), 2) , false, new DateOnly(1991, 05, 15), new TimeOnly(10, 00, 00), "Berlin", "Simons bistro", "Denmark", new DateTime(1996, 7, 16), "Kirchgasse 6"));
                orders.Add(new Orders(code + 2, "ANATR", i + 2, Math.Round((3.3 * i), 2) , true, new DateOnly(1990, 04, 04), new TimeOnly(11, 30, 00), "Madrid", "Queen Cozinha", "Brazil", new DateTime(1996, 9, 11), "Avda. Azteca 123"));
                orders.Add(new Orders(code + 3, "ANTON", i + 1, Math.Round((4.3 * i), 2) , true, new DateOnly(1957, 11, 30), new TimeOnly(12, 00, 00), "Cholchester", "Frankenversand", "Germany", new DateTime(1996, 10, 7), "Carrera 52 con Ave. Bolívar #65-98 Llano Largo"));
                orders.Add(new Orders(code + 4, "BLONP", i + 3, Math.Round((5.3 * i), 2) , false, new DateOnly(1930, 10, 22), new TimeOnly(15, 30, 00), "Marseille", "Ernst Handel", "Austria", new DateTime(1996, 12, 30), "Magazinweg 7"));
                orders.Add(new Orders(code + 5, "BOLID", i + 4, Math.Round((6.3 * i), 2) , true, new DateOnly(1953, 02, 18), new TimeOnly(16, 30, 00), "Tsawassen", "Hanari Carnes", "Switzerland", new DateTime(1997, 12, 3), "1029 - 12th Ave. S."));
                code += 5;
            }
            return orders;
        }

        public int? OrderID { get; set; }
        public string? CustomerID { get; set; }
        public int? EmployeeID { get; set; }
        public double? Freight { get; set; }
        public string? ShipCity { get; set; }
        public bool Verified { get; set; }
        public DateOnly? OrderDate { get; set; }

        public TimeOnly? OrderTime { get; set; }

        public string? ShipName { get; set; }

        public string? ShipCountry { get; set; }

        public DateTime ShippedDate { get; set; }
        public string? ShipAddress { get; set; }
    }
}
```

### src/components/grid-grouping/Grid.razor

```razor
@page "/datagrid/grouping"
@using Syncfusion.Blazor.Grids
@using BlazorDemos.Pages.Grid

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" Height="400" AllowGrouping="true" AllowSorting="true" AllowFiltering="true" Toolbar="@(new List<string>() { "Edit", "Delete", "Update", "Cancel" })" AllowPaging="true">
                <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" ></GridEditSettings>
                <GridGroupSettings Columns="@GroupedColumns" PersistGroupState="@isGroupStatePersistent"></GridGroupSettings>
                <GridFilterSettings Type="FilterType.Menu"></GridFilterSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(Orders.OrderID) IsPrimaryKey="true" HeaderText="Order ID" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Orders.CustomerID) HeaderText="Customer ID" ValidationRules="@(new ValidationRules{ Required=true})" Width="100"></GridColumn>
                    <GridColumn Field=@nameof(Orders.Freight) Format="C2" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules{ Required=true, Range = new object[]{1, 1000}})" AllowGrouping=false Width="120"></GridColumn>
                    <GridColumn Field=@nameof(Orders.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.DateOnly" TextAlign="TextAlign.Right" Width="100"></GridColumn>
                    <GridColumn Field=@nameof(Orders.OrderTime) HeaderText="Order Time" Type="ColumnType.TimeOnly" TextAlign="TextAlign.Right" Width="100"></GridColumn>
                </GridColumns>
            </SfGrid>
        </div>
    </div>
</div>
@code{
    public string[] GroupedColumns = new string[] { "CustomerID" };
    public List<Orders>? GridData { get; set; }
    private bool isGroupStatePersistent { get; set; }
    private bool isChecked { get; set; } = false;
    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
        if (args.Value != null)
        isGroupStatePersistent = (bool)args.Value;
    }
    protected override void OnInitialized()
    {
        GridData = Orders.GetAllRecords().ToList();
    }
}
```