Get Started with Grid

• Feb 21, 2023
• 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.

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. 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 string for column values.
   • Width - Specifies the column’s width.

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 use 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 the 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 the SortOrder and SortIndex properties to specify initial sort settings.

Index.razor

<DxGridDataColumn FieldName="CloudCover"
                  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="120px"/>
           @* declare other columns *@
       </Columns>                      
   </DxGrid>
   

2. Add the <EditFormTemplate></EditFormTemplate> to the component’s markup to define the edit form’s content. Use the template’s context parameter to access the EditModel and DataItem. In the template, add data editors and implement two-way binding between editor values and edit model fields.

   The code below uses the DxFormLayout component to display editors for all visible data columns.

   Index.razor

   <DxGrid Data="@Data">
       <Columns>
           @* declare columns *@
       <Columns>
       <TotalSummary>
           @* add summary items *@
       </TotalSummary>
       <EditFormTemplate Context="EditFormContext">
           @{
               var forecast = (WeatherForecast)EditFormContext.EditModel;
           }
           <DxFormLayout>
               <DxFormLayoutItem Caption="Date">
                   <DxDateEdit @bind-Date="@forecast.Date" />
               </DxFormLayoutItem>
               <DxFormLayoutItem Caption="Forecast">
                   <DxTextBox @bind-Text="@forecast.Forecast" />
               </DxFormLayoutItem>
               <DxFormLayoutItem Caption="Cloud Cover">
                   <DxTextBox @bind-Text="@forecast.CloudCover" />
               </DxFormLayoutItem>
               <DxFormLayoutItem Caption="Temperature">
                   <DxSpinEdit @bind-Value="@forecast.TemperatureC" />
               </DxFormLayoutItem>
           </DxFormLayout>
       </EditFormTemplate>                    
   </DxGrid>
   

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

   • EditModelSaving - Fires when a user adds a new row or edits an existing row.
   • DataItemDeleting - Fires when a user deletes a data row.
   Index.razor

   <DxGrid Data="@Data"
           EditModelSaving="OnEditModelSaving"
           DataItemDeleting="OnDataItemDeleting">
       <Columns>
           @* declare columns *@
       <Columns>
       <TotalSummary>
           @* add summary items *@
       </TotalSummary>
       <EditFormTemplate Context="EditFormContext">
           @* define the edit form content *@
       </EditFormTemplate>                    
   </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: Edit Data and Validate Input.

Complete Code

Show Complete Code

Index.razor

@page "/index"
@inject WeatherForecastService ForecastService

<DxGrid Data="@Data"
       ShowGroupPanel="true"
       ShowFilterRow="true"
       DataItemDeleting="OnDataItemDeleting"
       EditModelSaving="OnEditModelSaving">
   <Columns>
       <DxGridCommandColumn Width="120px"/>
       <DxGridDataColumn FieldName="Date"
                         DisplayFormat="D" />
       <DxGridDataColumn FieldName="Forecast"/>
       <DxGridDataColumn FieldName="CloudCover"
                         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>
   <EditFormTemplate Context="EditFormContext">
       @{
           var forecast = (WeatherForecast)EditFormContext.EditModel;
       }
       <DxFormLayout>
           <DxFormLayoutItem Caption="Date">
               <DxDateEdit @bind-Date="@forecast.Date" />
           </DxFormLayoutItem>
           <DxFormLayoutItem Caption="Forecast">
               <DxTextBox @bind-Text="@forecast.Forecast" />
           </DxFormLayoutItem>
           <DxFormLayoutItem Caption="Cloud Cover">
               <DxTextBox @bind-Text="@forecast.CloudCover" />
           </DxFormLayoutItem>
           <DxFormLayoutItem Caption="Temperature">
               <DxSpinEdit @bind-Value="@forecast.TemperatureC" />
           </DxFormLayoutItem>
       </DxFormLayout>
   </EditFormTemplate>
</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.