Movatterモバイル変換

[0]ホーム
URL:

| PDF
Edit
Suggest a Feature

    Grouping in Blazor DataGrid

    5 Feb 202624 minutes to read

    The grouping feature in the Syncfusion® Blazor DataGrid organizes rows into groups, enabling users to expand or collapse related records. Columns can be grouped by dragging the column header into the group drop area. Enable grouping by setting theAllowGrouping property totrue. Configure behavior usingGridGroupSettings.

    @using Syncfusion.Blazor.Grids<SfGridDataSource="@GridData"AllowGrouping="true"Height="267px"><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Initial group

    Configure initial grouping in the Syncfusion® Blazor DataGrid by setting theColumns property ofGridGroupSettings to an array of field names. This pre-groups the specified columns on initial render to accelerate data analysis.

    @using Syncfusion.Blazor.Grids<SfGridDataSource="@GridData"AllowGrouping="true"Height="267px"><GridGroupSettingsColumns="@Initial"></GridGroupSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    public string[] Initial = (new string[] { "CustomerID", "ShipCity" });    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Group multiple columns by listing their field names in theColumns property ofGridGroupSettings.

    Prevent grouping for particular column

    To prevent grouping for a specific column, setGridColumn.AllowGrouping tofalse. This disables the drag-to-group feature for that column, while allowing grouping for other columns.

    @using Syncfusion.Blazor.Grids<SfGridDataSource="@GridData"AllowGrouping="true"Height="267px"><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"AllowGrouping="false"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Hide drop area

    By default, the Syncfusion® Blazor DataGrid displays a drop area for grouping columns. In scenarios where further grouping or ungrouping should be restricted after initial grouping, hide the drop area.

    To hide the drop area, set theShowDropArea property ofGridGroupSettings tofalse.

    @using Syncfusion.Blazor.Grids@using Syncfusion.Blazor.Buttons<divstyle="display:flex;gap: 5px;"><label> Hide or show drop area</label><SfSwitch@bind-Checked="isChecked"OffLabel="OFF"OnLabel="ON"ValueChange="Change"TChecked="bool?"></SfSwitch></div><SfGridDataSource="@GridData"AllowGrouping="true"Height="315px"><GridGroupSettingsShowDropArea="@show"Columns="@Initial"></GridGroupSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    public bool show { get; set; } = false;    public string[] Initial = (new string[] { "CustomerID", "ShipCity" });    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }    private bool? isChecked = null;    private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)    {        if (args.Checked == true)        {            show = true;        }        else        {            show = false;        }    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    By default, the group drop area is shown only if at least one column is available to group.

    Show the grouped column

    By default, grouped columns are hidden to keep the view focused. To display grouped columns, setShowGroupedColumn totrue inGridGroupSettings.

    @using Syncfusion.Blazor.Grids@using Syncfusion.Blazor.Buttons<divstyle="display:flex;gap: 5px;"><label> Hide or show grouped columns</label><SfSwitch@bind-Checked="isChecked"OffLabel="OFF"OnLabel="ON"ValueChange="Change"TChecked="bool?"></SfSwitch></div><SfGrid@ref="Grid"DataSource="@GridData"AllowGrouping="true"Height="315px"><GridGroupSettingsColumns="@Initial"ShowGroupedColumn=@IsShow></GridGroupSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    SfGrid<OrderData> Grid;    public bool IsShow { get; set; } = true;    public string[] Initial = (new string[] { "CustomerID", "ShipCity" });    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }    private bool? isChecked = null;    private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)    {        if (args.Checked == true)        {            IsShow = false;            await Grid.Refresh();        }        else        {            IsShow = true;            await Grid.Refresh();        }    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Persist grouped row expand or collapse state

    The Syncfusion® Blazor DataGrid can persist the expand or collapse state of grouped rows across operations such as paging, sorting, filtering, and editing. By default, these operations reset grouped rows to their initial state. To retain the current state and ensure a consistent user experience, setGridGroupSettings.PersistGroupState totrue. This also applies when using external methods likeExpandAllGroupAsync andCollapseAllGroupAsync.

    @using Syncfusion.Blazor.Grids@using Syncfusion.Blazor.Buttons<divstyle="display:flex;gap: 5px;"><label> Enable or disable grouped row state persistence</label><SfSwitch@bind-checked="IsGroupStatePersistent "OffLabel="OFF"OnLabel="ON"ValueChange="Change"TChecked="bool"></SfSwitch></div><SfGridDataSource="@GridData"AllowGrouping="true"Height="190px"AllowSorting="true"AllowFiltering="true"AllowPaging="true"><GridGroupSettingsColumns="@InitialGroupedColumns"PersistGroupState="@IsGroupStatePersistent"></GridGroupSettings><GridEditSettingsAllowEditing="true"></GridEditSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"IsPrimaryKey="true"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    private bool IsGroupStatePersistent { get; set; } = true;    private string[] InitialGroupedColumns = new string[] { "CustomerID", "ShipCity" };    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }    private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)    {        if (args.Checked == true)        {            IsGroupStatePersistent = true;        }        else        {            IsGroupStatePersistent = false;        }    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10001;string[]customerIDs={"VINET","TOMSP","HANAR","VICTE","SUPRD","CHOPS","RICSU","WELLI"};string[]cities={"Reims","Münster","Rio de Janeiro","Lyon","Charleroi"};string[]shipNames={"Vins et alcools Chevali","Toms Spezialitäten","Hanari Carnes","Victuailles en stock","Suprêmes délices","Chop-suey Chinese","Richter Supermarkt","Wellington Import"};for(inti=0;i<45;i++){stringcustomerID=customerIDs[i%customerIDs.Length];stringcity=cities[i%cities.Length];stringshipName=shipNames[i%shipNames.Length];Orders.Add(newOrderData(code,customerID,city,shipName));code++;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Sort grouped columns in descending order during initial grouping

    By default, grouped columns are sorted in ascending order. To sort in descending order during initial grouping, set theField andDirection inGridSortSettings.Columns.

    @using Syncfusion.Blazor.Grids<SfGridDataSource="@GridData"AllowSorting="true"AllowGrouping="true"Height="267px"><GridGroupSettingsColumns="@Initial"></GridGroupSettings><GridSortSettings><GridSortColumns><GridSortColumnField="CustomerID"Direction="SortDirection.Descending"></GridSortColumn></GridSortColumns></GridSortSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    public string[] Initial = (new string[] { "CustomerID" });    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Group by format

    By default, grouping is performed based on the raw values. Alternatively, numeric or datetime columns can be grouped based on a specified display format by settingEnableGroupByFormat on the corresponding column.

    @using Syncfusion.Blazor.Grids<SfGrid@ref="Grid"DataSource="@GridData"AllowGrouping="true"Height="315px"><GridGroupSettingsShowDropArea="false"Columns=@Format></GridGroupSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.OrderDate)HeaderText=" Order Date"Format="yyyy/MMM"Type="ColumnType.Date"EnableGroupByFormat="true"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.Freight)HeaderText="Freight"Format="C2"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"EnableGroupByFormat="true"Width="80"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    SfGrid<OrderData>? Grid { get; set; }    public string[] Format = (new string[] { "OrderDate", "Freight" });    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,DateTime?OrderDate,double?Freight){this.OrderID=OrderID;this.CustomerID=CustomerID;this.OrderDate=OrderDate;this.Freight=Freight;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET",newDateTime(1996,07,06),32.38));Orders.Add(newOrderData(10249,"TOMSP",newDateTime(1996,07,06),11.61));Orders.Add(newOrderData(10250,"HANAR",newDateTime(1996,07,06),65.83));Orders.Add(newOrderData(10251,"VICTE",newDateTime(1996,07,06),45.78));Orders.Add(newOrderData(10252,"SUPRD",newDateTime(1996,07,06),98.6));Orders.Add(newOrderData(10253,"HANAR",newDateTime(1996,07,06),103.45));Orders.Add(newOrderData(10254,"CHOPS",newDateTime(1996,07,06),103.45));Orders.Add(newOrderData(10255,"RICSU",newDateTime(1996,07,06),112.48));Orders.Add(newOrderData(10256,"WELLI",newDateTime(1996,07,06),33.45));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicDateTime?OrderDate{get;set;}publicdouble?Freight{get;set;}}

    Numeric columns can be grouped based on formats such as currency or percentage, and datetime columns can be grouped based on date or time formats.

    Collapse all grouped rows at initial rendering

    The Syncfusion® Blazor DataGrid can expand or collapse grouped rows to control the visibility of grouped data. This is useful for summarizing large datasets by initially hiding details.

    To collapse all grouped rows at initial rendering, use theDataBound event with theCollapseAllGroupAsync method.

    @using Syncfusion.Blazor.Grids<SfGridDataSource="@GridData"@ref="Grid"AllowGrouping="true"Height="267px"><GridGroupSettingsColumns="@groupOptions"></GridGroupSettings><GridEventsDataBound="DataBoundHandler"TValue="OrderData"></GridEvents><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="110"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    SfGrid<OrderData> Grid;    public bool initial = true;    public string[] groupOptions = (new string[] { "ShipCity" });    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }    public async Task DataBoundHandler()    {        if(initial == true)        {            await Grid.CollapseAllGroupAsync();            initial = false;        }    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Collapsing every grouped record can take time on large datasets. For large data, uselazy-load grouping. The same consideration applies toExpandAllGroupAsync.

    Group or Ungroup column externally

    The Syncfusion® Blazor DataGrid supports interaction-based grouping by dragging headers to the grouping area. It also supports programmatic grouping and ungrouping viaGroupColumnAsync andUngroupColumnAsync.

    @using Syncfusion.Blazor.Grids@using Syncfusion.Blazor.Buttons@using Syncfusion.Blazor.DropDowns<divstyle="display: flex; flex-direction: column; "><divstyle="display: flex; gap: 5px;"><label>Column name:</label><SfDropDownListTValue="string"TItem="Columns"Width="120px"Placeholder="Select a Column"DataSource="@LocalData"@bind-Value="@DropDownValue"><DropDownListFieldSettingsValue="ID"Text="Value"></DropDownListFieldSettings></SfDropDownList></div><divstyle="display: flex; gap: 5px; margin-top: 10px; margin-bottom: 10px"><SfButtonOnClick="GroupColumn">Group column</SfButton><SfButtonOnClick="UnGroupColumn">UnGroup column</SfButton></div></div><SfGrid@ref="Grid"DataSource="@GridData"AllowGrouping="true"Height="315px"><GridGroupSettingsShowDropArea="false"Columns="@Initial"></GridGroupSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    SfGrid<OrderData>? Grid { get; set; }    public string DropDownValue { get; set; } = "CustomerID";    public string[] Initial = (new string[] { "CustomerID", "ShipCity" });    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }    List<Columns> LocalData = new List<Columns>    {        new Columns() { ID= "OrderID", Value= "OrderID" },        new Columns() { ID= "CustomerID", Value= "CustomerID" },        new Columns() { ID= "ShipCity", Value= "ShipCity" },        new Columns() { ID= "ShipName", Value= "ShipName" },    };    public class Columns    {        public string ID { get; set; }        public string Value { get; set; }    }    public async Task GroupColumn()    {        await Grid.GroupColumnAsync(DropDownValue);    }    public async Task UnGroupColumn()    {        await Grid.UngroupColumnAsync(DropDownValue);    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Expand or collapse externally

    The Syncfusion® Blazor DataGrid can expand or collapse grouped rows programmatically to control the visibility of grouped data.

    Expand or collapse all grouped rows

    UseExpandAllGroupAsync andCollapseAllGroupAsync to expand or collapse all grouped rows.

    @using Syncfusion.Blazor.Grids@using Syncfusion.Blazor.Buttons<divstyle="display:flex;gap:10px"><label>  Expand or collapse rows</label><SfSwitchOffLabel="OFF"OnLabel="ON"ValueChange="Change"TChecked="bool?"></SfSwitch></div><SfGrid@ref="Grid"DataSource="@GridData"AllowGrouping="true"Height="315px"><GridGroupSettingsShowDropArea="false"Columns="@columns"></GridGroupSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    SfGrid<OrderData>? Grid { get; set; }    public string[] columns = (new string[] { "CustomerID", "ShipCity" });    public bool IsShow { get; set; } = true;    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }    private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)    {        if (args.Checked == true)        {            await Grid.CollapseAllGroupAsync();        }        else        {           await Grid.ExpandAllGroupAsync();        }    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Clear grouping

    The clear grouping feature in the Syncfusion® Blazor DataGrid removes all grouped columns from the Grid, providing a quick way to reset grouping.

    To clear all grouped columns, call theClearGroupingAsync method.

    @using Syncfusion.Blazor.Grids@using Syncfusion.Blazor.Buttons<SfButtonOnClick="ClearGrouping"> Clear Grouping</SfButton><SfGrid@ref="Grid"DataSource="@GridData"AllowGrouping="true"Height="315px"><GridGroupSettingsColumns="@columns"></GridGroupSettings><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="120"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="150"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="150"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="150"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    SfGrid<OrderData>? Grid { get; set; }    public string[] columns = (new string[] { "CustomerID", "ShipCity" });    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }    private async Task ClearGrouping()    {        await Grid.ClearGroupingAsync();    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    Grouping events

    The Syncfusion® Blazor DataGrid provides two events for the group action:Grouping andGrouped.Grouping is triggered before the action starts, andGrouped is triggered after completion. These events support custom logic based on grouping.

    1. Grouping Event: Triggered before the grouping or ungrouping action is performed in the Grid. Use this to perform operations or cancel the action. The event parameters include the current grouping column name and the action.

    2. Grouped Event: Triggered after the grouping or ungrouping action is performed in the Grid. Use this to run post-action logic. The event parameters include the current grouping column name and the action.

    @using Syncfusion.Blazor.Grids@if (show == true){<divstyle="text-align : center; color: red"><span> Group action completed for @columnName column</span></div><br/>}<SfGrid@ref="Grid"DataSource="@GridData"AllowGrouping="true"Height="260px"><GridEventsGrouping="GroupingHandler"Grouped="GroupedHandler"TValue="OrderData"></GridEvents><GridColumns><GridColumnField=@nameof(OrderData.OrderID)HeaderText="Order ID"TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"Width="90"></GridColumn><GridColumnField=@nameof(OrderData.CustomerID)HeaderText="Customer ID"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipCity)HeaderText="Ship City"Width="100"></GridColumn><GridColumnField=@nameof(OrderData.ShipName)HeaderText="Ship Name"Width="120"></GridColumn></GridColumns></SfGrid>@code {    public List<OrderData> GridData { get; set; }    SfGrid<OrderData>? Grid { get; set; }    public bool show { get; set; } = false;    public string columnName { get; set; }    public string requesttype { get; set; }    protected override void OnInitialized()    {        GridData = OrderData.GetAllRecords();    }    public async Task GroupingHandler(GroupingEventArgs args)    {        if (args.ColumnName == "OrderID")        {            args.Cancel = true;        }    }    public async Task GroupedHandler(GroupedEventArgs args)    {        columnName = args.ColumnName;        show = true;    }}
    publicclassOrderData{publicstaticList<OrderData>Orders=newList<OrderData>();publicOrderData(){}publicOrderData(int?OrderID,stringCustomerID,stringShipCity,stringShipName){this.OrderID=OrderID;this.CustomerID=CustomerID;this.ShipCity=ShipCity;this.ShipName=ShipName;}publicstaticList<OrderData>GetAllRecords(){if(Orders.Count()==0){intcode=10;for(inti=1;i<2;i++){Orders.Add(newOrderData(10248,"VINET","Reims","Vins et alcools Chevali"));Orders.Add(newOrderData(10249,"TOMSP","Münster","Toms Spezialitäten"));Orders.Add(newOrderData(10250,"HANAR","Rio de Janeiro","Hanari Carnes"));Orders.Add(newOrderData(10251,"VICTE","Lyon","Victuailles en stock"));Orders.Add(newOrderData(10252,"SUPRD","Charleroi","Suprêmes délices"));Orders.Add(newOrderData(10253,"HANAR","Lyon","Hanari Carnes"));Orders.Add(newOrderData(10254,"CHOPS","Rio de Janeiro","Chop-suey Chinese"));Orders.Add(newOrderData(10255,"RICSU","Münster","Richter Supermarkt"));Orders.Add(newOrderData(10256,"WELLI","Reims","Wellington Import"));code+=5;}}returnOrders;}publicint?OrderID{get;set;}publicstringCustomerID{get;set;}publicstringShipCity{get;set;}publicstringShipName{get;set;}}

    See Also

    Refer to theBlazor DataGrid feature tour for an overview of capabilities. Explore theBlazor DataGrid example to learn how to present and manipulate data.

    Help us improve this page

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information

    Please provide additional information
    Please provide additional information
    ×
    [8]ページ先頭
    ©2009-2026 Movatter.jp