Get Started with Blazor Grid

• Jul 17, 2024
• 7 minutes to read

Watch Video: Get Started with Grid

This tutorial describes how to build a simple Blazor application. The application uses a DevExpress Grid component to display and edit a weather forecast.

Create an Application

Refer to the following section for instructions: Create an application. Make sure that resources and themes are linked correctly.

Enable Interactivity on a Page

Blazor Grid supports static render mode to display static data in a single page. For other features, you need to enable interativity on a Razor page and allow the Grid component to execute scripts and display data.

Index.razor

@rendermode InteractiveServer

Prepare a Data Source

1. Make sure your project includes the following classes:

   • Data/WeatherForecast.cs
   • Data/WeatherForecastService.cs

   If you use Microsoft or DevExpress project templates to create a project, these classes are already included (you may need to change their code, see the next step). Otherwise, you should add the classes.

2. Use the following code for the classes:

   WeatherForecast.cs

   using System;
   
   public class WeatherForecast {
       public DateTime Date { get; set; }
       public int TemperatureC { get; set; }
       public string Forecast { get; set; }
       public string CloudCover { get; set; }
   }
   

   WeatherForecastService.cs

   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Threading;
   using System.Threading.Tasks;
   
   public class WeatherForecastService {
       private List<WeatherForecast> Forecast { get; set; }
   
       private static string[] CloudCover = new[] {
           "Sunny", "Partly cloudy", "Cloudy", "Storm"
       };
   
       Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
           Tuple.Create( 22 , "Hot"),
           Tuple.Create( 13 , "Warm"),
           Tuple.Create( 0 , "Cold"),
           Tuple.Create( -10 , "Freezing")
       };
   
       public WeatherForecastService() {
           Forecast = CreateForecast();
       }
   
       private List<WeatherForecast> CreateForecast() {
           var rng = new Random();
           DateTime startDate = DateTime.Now;
           return Enumerable.Range(1, 30).Select(index => {
               var temperatureC = rng.Next(-10, 30);
               return new WeatherForecast {
                   Date = startDate.AddDays(index),
                   TemperatureC = temperatureC,
                   CloudCover = CloudCover[rng.Next(0, 4)],
                   Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
               };
           }).ToList();
       }
   
       public List<WeatherForecast> GetForecast() {
           return Forecast;
       }
   
       public Task<WeatherForecast[]> GetForecastAsync(CancellationToken ct = default) {
           return Task.FromResult(Forecast.ToArray());
       }
   }
   

3. Make sure that the WeatherForecastService service is registered in the Program.cs file.

   Program.cs

   // ...
   builder.Services.AddSingleton<WeatherForecastService>();
   

Add a Grid and Bind It to Data

1. Add <DxGrid></DxGrid> tags to the Pages/Index.razor page.

   Index.razor

   @page "/index"
   
   <DxGrid>
   </DxGrid>
   

2. Inject the WeatherForecastService to the page.

   Index.razor

   @page "/index"
   @inject WeatherForecastService ForecastService
   
   <DxGrid>
   </DxGrid>
   

3. In the @code block, declare a list of WeatherForecast objects – Data. Populate this list in the OnInitialized lifecycle method.

   Index.razor

   @code {
       List<WeatherForecast> Data { get; set; }
   
       protected override void OnInitialized() {
           Data = ForecastService.GetForecast();
       }
   }
   

4. Use the Data property to bind the Grid to the Data list.

   Index.razor

   <DxGrid Data="@Data">
   </DxGrid>
   

Add Columns

1. Add <Columns></Columns> to the component’s markup to define the Columns collection.

2. Add DxGridDataColumn objects to the Columns collection. Use the FieldName property to bind columns to data source fields (Date, Forecast, CloudCover, TemperatureC).

   You can also set up the following properties to customize the columns:

   Caption

   Specifies the column’s caption.

   DisplayFormat

   Specifies the format of column values and summary values calculated for this column.

   Width

   Specifies the column’s width in CSS units.

   FixedPosition

   Allows you to anchor the column to the Grid’s left or right edge.

Index.razor

<DxGrid Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="Forecast" />
        <DxGridDataColumn FieldName="CloudCover" Width="120px" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="Temperature" Width="120px" />
    </Columns>  
</DxGrid>

Sort Data

You can execute the following operations to sort data in the grid:

• Click the Temperature column header to sort data against this column.
• Hold the Shift key and click Temperature and Cloud Cover column headers to sort data against these columns.
• Hold the Ctrl key and click column headers to clear sorting.

You can use SortOrder and SortIndex properties to specify initial sort settings.

Index.razor

<DxGridDataColumn FieldName="CloudCover"
                  Width="120px"
                  SortOrder="GridColumnSortOrder.Descending"
                  SortIndex="1" />
<DxGridDataColumn FieldName="TemperatureC"
                  Caption="Temperature"
                  Width="120px" 
                  SortOrder="GridColumnSortOrder.Ascending"
                  SortIndex="0" />

Group Data

Set the ShowGroupPanel property to true to enable users to group data.

Index.razor

<DxGrid Data="@Data"
        ...
        ShowGroupPanel="true">
</DxGrid>

To group data by a column, a user should drag and drop a column header onto the Group Panel.

You can also use the GroupIndex property to specify initial group settings.

Index.razor

<DxGridDataColumn FieldName="Forecast"
                  GroupIndex="0" />

Filter Data

Set the ShowFilterRow property to true to enable users to filter data.

Index.razor

<DxGrid Data="@Data"
        ...
        ShowFilterRow="true">
</DxGrid>

Add Total Summary

Blazor Grid allows you to add total and group summaries. For example, follow the steps below to create the total summary.

1. Add <TotalSummary></TotalSummary> to the component’s markup to define the TotalSummary collection.
2. Add DxGridSummaryItem objects to the TotalSummary collection and specify their properties (SummaryType, FieldName, and so on).

Index.razor

<DxGrid Data="@Data"
        ... >
    ...    
    <TotalSummary>
        <DxGridSummaryItem FieldName="Date"
                           SummaryType=GridSummaryItemType.Min
                           ValueDisplayFormat="D" />
        <DxGridSummaryItem FooterColumnName="TemperatureC"
                           SummaryType=GridSummaryItemType.Count />
    </TotalSummary>
</DxGrid>

Edit Data

Follow the steps below to allow users to edit data:

1. Declare a DxGridCommandColumn object in the Columns collection. The command column contains buttons that allow users to edit and delete rows.

   Index.razor

   <DxGrid Data="@Data">
       <Columns>
           <DxGridCommandColumn Width="150px"/>
           @* declare other columns *@
       </Columns>                      
   </DxGrid>
   

2. Set the EditMode property to EditRow to use inline editors for data editing. In this mode, the Grid automatically generates editors for columns based on their data types.

   Index.razor

   <DxGrid Data="@Data" EditMode="GridEditMode.EditRow">
       <Columns>
           @* declare columns *@
       <Columns>
       <TotalSummary>
           @* add summary items *@
       </TotalSummary>
   </DxGrid>
   

3. Implement handlers for the following events to post the changes to the data source:

   Index.razor

   <DxGrid Data="@Data"
           EditMode="GridEditMode.EditRow" 
           EditModelSaving="OnEditModelSaving"
           DataItemDeleting="OnDataItemDeleting">
       <Columns>
           @* declare columns *@
       <Columns>
       <TotalSummary>
           @* add summary items *@
       </TotalSummary>
   </DxGrid>
   
   @code {        
       // ...
   
       void OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
           Data.Remove(e.DataItem as WeatherForecast);
       }
   
       void OnEditModelSaving(GridEditModelSavingEventArgs e) {
           var editModel = (WeatherForecast)e.EditModel;
           var dataItem = e.IsNew ? new WeatherForecast() : (WeatherForecast)e.DataItem;
   
           dataItem.Date = editModel.Date;
           dataItem.TemperatureC = editModel.TemperatureC;
           dataItem.CloudCover = editModel.CloudCover;
   
           if (e.IsNew)
               Data.Add(dataItem as WeatherForecast);
       }
   }
   

Tip

For detailed information on how to enable data editing and use edit-related options, refer to the following topic: Editing and Validation in Blazor Grid.

Complete Code

Show Complete Code

Index.razor

@page "/index"
@inject WeatherForecastService ForecastService

<DxGrid Data="@Data"
      ShowGroupPanel="true"
      ShowFilterRow="true"
      EditMode="GridEditMode.EditRow"
      DataItemDeleting="OnDataItemDeleting"
      EditModelSaving="OnEditModelSaving">
  <Columns>
      <DxGridCommandColumn />
      <DxGridDataColumn FieldName="Date"
                        DisplayFormat="D" />
      <DxGridDataColumn FieldName="Forecast"/>
      <DxGridDataColumn FieldName="CloudCover"
                        Width="120px"
                        SortOrder="GridColumnSortOrder.Descending"
                        SortIndex="1" />
      <DxGridDataColumn FieldName="TemperatureC"
                        Caption="Temperature"
                        Width="120px"
                        SortOrder="GridColumnSortOrder.Ascending"
                        SortIndex="0" />
  </Columns>
  <TotalSummary>
      <DxGridSummaryItem FieldName="Date"
                         SummaryType=GridSummaryItemType.Min
                         ValueDisplayFormat="D" />
      <DxGridSummaryItem FooterColumnName="TemperatureC"
                         SummaryType=GridSummaryItemType.Count />
  </TotalSummary>
</DxGrid>

@code {
   List<WeatherForecast> Data { get; set; }

   protected override void OnInitialized() {
       Data = ForecastService.GetForecast();
   }

   void OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
       Data.Remove(e.DataItem as WeatherForecast);
   }

   void OnEditModelSaving(GridEditModelSavingEventArgs e) {
       var editModel = (WeatherForecast)e.EditModel;
       var dataItem = e.IsNew ? new WeatherForecast() : (WeatherForecast)e.DataItem;

       dataItem.Date = editModel.Date;
       dataItem.TemperatureC = editModel.TemperatureC;
       dataItem.CloudCover = editModel.CloudCover;

       if (e.IsNew)
           Data.Add(dataItem as WeatherForecast);
   }
}

WeatherForecast.cs

using System;

public class WeatherForecast {
   public DateTime Date { get; set; }
   public int TemperatureC { get; set; }
   public string Forecast { get; set; }
   public string CloudCover { get; set; }
}

WeatherForecastService.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;

public class WeatherForecastService {
   private List<WeatherForecast> Forecast { get; set; }

   private static string[] CloudCover = new[] {
       "Sunny", "Partly cloudy", "Cloudy", "Storm"
   };

   Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
       Tuple.Create( 22 , "Hot"),
       Tuple.Create( 13 , "Warm"),
       Tuple.Create( 0 , "Cold"),
       Tuple.Create( -10 , "Freezing")
   };

   public WeatherForecastService() {
       Forecast = CreateForecast();
   }

   private List<WeatherForecast> CreateForecast() {
       var rng = new Random();
       DateTime startDate = DateTime.Now;
       return Enumerable.Range(1, 30).Select(index => {
           var temperatureC = rng.Next(-10, 30);
           return new WeatherForecast {
               Date = startDate.AddDays(index),
               TemperatureC = temperatureC,
               CloudCover = CloudCover[rng.Next(0, 4)],
               Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
           };
       }).ToList();
   }

   public List<WeatherForecast> GetForecast() {
       return Forecast;
   }

   public Task<WeatherForecast[]> GetForecastAsync(CancellationToken ct = default) {
       return Task.FromResult(Forecast.ToArray());
   }
}

More Features

For more information about Grid features, refer to the root topic.