Blazor Grid - Grouping

Grid Grouping

Smart.Grid allows you to group rows by column values in order to create a row hierarchy.

You can choose by which column/columns you wish to group the rows by setting the GroupBy property of the GridDataSourceSettings() object.

The grouping settings can be customized using the GridGrouping() object.

<Grid @ref="grid" DataSourceSettings="dataSourceSettings" DataSource="dataRecords" Grouping="@grouping">
  <Columns>
      <Column DataField="Id" Label="#" DataType="number"></Column>
      <Column DataField="FirstName" Label="First Name"></Column>
      <Column DataField="LastName" Label="Last Name"></Column>
      <Column DataField="ProductName" Label="Product"></Column>
      <Column DataField="Quantity" Label="Quantity" DataType="number"></Column>
      <Column DataField="Price" Label="Unit Price" DataType="number"></Column>
      <Column DataField="Total" Label="Total" DataType="number"></Column>
  </Columns>
</Grid>

@code {
  Grid grid;

  GridGrouping grouping = new GridGrouping() {
      Enabled = true,
      RenderMode = GridGroupingRenderMode.Basic,
      GroupBar = new GridGroupingGroupBar() { Visible = true }
  };

  GridDataSourceSettings dataSourceSettings = new GridDataSourceSettings()
  {
      GroupBy = new string[]
      {
          "ProductName",
          "FirstName"
      },
      DataFields = new List<GridDataSourceSettingsDataField>()
      {
          new GridDataSourceSettingsDataField()
          {
              Name = "Id",
              DataType = GridDataSourceSettingsDataFieldDataType.Number
          },
          new GridDataSourceSettingsDataField()
          {
              Name = "Total",
              DataType = GridDataSourceSettingsDataFieldDataType.Number
          },
          new GridDataSourceSettingsDataField()
          {
              Name = "ProductName",
              DataType = GridDataSourceSettingsDataFieldDataType.String
          },
          new GridDataSourceSettingsDataField()
          {
              Name = "FirstName",
              DataType = GridDataSourceSettingsDataFieldDataType.String
          },
          new GridDataSourceSettingsDataField()
          {
              Name = "LastName",
              DataType = GridDataSourceSettingsDataFieldDataType.String
          },
          new GridDataSourceSettingsDataField()
          {
              Name = "Quantity",
              DataType = GridDataSourceSettingsDataFieldDataType.Number
          },
          new GridDataSourceSettingsDataField()
          {
              Name = "Price",
              DataType = GridDataSourceSettingsDataFieldDataType.Number
          }
      }
  };
  
}

Difference between Grid with grouping enabled and disabled:

Grid basic grouping

Group Bar

The Group Bar allows users to customize the Grid hieararchy by dragging columns onto the Group Bar

<Grid @ref="grid" DataSourceSettings="dataSourceSettings" DataSource="dataRecords" Grouping="@grouping">
  .....
</Grid>
@code{
  ....
  GridGrouping grouping = new GridGrouping() {
      Enabled = true,
      RenderMode = GridGroupingRenderMode.Basic,
      GroupBar = new GridGroupingGroupBar() { Visible = true }
  };
}
Group Bar

Grouping with Header

It is also possible to apply grouping rules using the built-in Grid Header

<Grid @ref="grid" DataSourceSettings="dataSourceSettings" DataSource="dataRecords"
  Grouping="@grouping" Header="header">
  .....
</Grid>
@code{
  ....
  GridHeader header = new GridHeader() { Visible = true };
}
Group Bar