Get Started with Data Grid

May 19, 2021
6 minutes to read

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

Create an Application

Refer to the Create an application section for instructions.

If you use Microsoft project templates, do the following:

Configure the application as described in this topic: Microsoft Templates (Visual Studio).
Apply the DevExpress Blazing Berry theme as described in this topic: Apply a DevExpress Bootstrap Theme.

Add a Data Grid and Bind It to Data

Add <DxDataGrid></DxDataGrid> tags to the Pages/Index.razor page.
- Index.razor
```
<DxDataGrid>
</DxDataGrid>
```

In the Razor @code block, create a WeatherForecast class with Date, TemperatureC, CloudCover, and Precipitation fields.

Index.razor

@code {
    public class WeatherForecast {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }            
        public string CloudCover { get; set; }
        public bool Precipitation { get; set; }
    }
}

Declare a weatherForecasts observable collection. Fill this collection in the OnInitialized lifecycle method.

Index.razor

@code {
    // ...

    static readonly Random random = new Random();
    readonly ObservableCollection<WeatherForecast> weatherForecasts = new ObservableCollection<WeatherForecast>();

    protected override void OnInitialized() {
        String[] CloudCover = {"Sunny", "Partly cloudy", "Cloudy", "Storm"};

        foreach (var date in Enumerable.Range(1, 30).Select(i => DateTime.Now.Date.AddDays(i))) {
            weatherForecasts.Add(new WeatherForecast() {
                Date = date,
                TemperatureC = random.Next(10, 20),
                Precipitation = Convert.ToBoolean(random.Next(0, 2)),
                CloudCover = CloudCover[random.Next(0,CloudCover.Length)]
            });
        }
    }
}

Use the Data property to bind the data grid to the weatherForecasts collection.
- Index.razor
```
<DxDataGrid Data="@weatherForecasts">
</DxDataGrid>
```

Add Columns

Add the following objects to the markup and assign data source fields to them (use the Field property):

Column	Data Source Field
DxDataGridDateEditColumn	`Date`
DxDataGridSpinEditColumn	`TemperatureC`
DxDataGridColumn	`CloudCover`
DxDataGridCheckBoxColumn	`Precipitation`

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

DxDataGridColumn.Caption - Specifies the column’s caption. If you do not specify this property, the data grid generates a caption based on the field name.
DxDataGridColumnBase.Width - Specifies the column’s width.
DxDataGridDateEditColumnBase.DisplayFormat - Specifies the pattern used to format the Date Edit column’s display values.
DxDataGridDateEditColumnBase.EditorFormat - Specifies the pattern used to format the value of the Date Edit column’s editor when it is focused.

Index.razor

<DxDataGrid Data="@weatherForecasts">
    <DxDataGridDateEditColumn Field="@nameof(WeatherForecast.Date)" 
                              DisplayFormat="D" 
                              EditorFormat="d" />
    <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)" 
                              Caption="Temperature"
                              TextAlignment="DataGridTextAlign.Left" 
                              Width="100px" />
    <DxDataGridColumn Field="@nameof(WeatherForecast.CloudCover)" />
    <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)" 
                              Width="100px" />
</DxDataGrid>

Edit Data

Follow the steps below to allow users to edit data:

Add a DxDataGridCommandColumn column to the grid.
Implement handlers for the following events to post the changes to the data source:
- RowInserting - Fires when a user adds a new row.
- RowUpdating - Fires when a user updates a data row.
- RowRemoving - Fires when a user deletes a data row.
Note
The data grid is bound to the observable collection and automatically reloads data after changes. If you bind the data grid to a data source that does not implement the INotifyCollectionChanged interface, you should reload data and redraw the data grid after a row is inserted or deleted. To do this, use the Refresh method in the OnRowInserting and OnRowDeleting handlers.
Implement a handler for the InitNewRow event to initialize a new data row.

Index.razor

<DxDataGrid Data="@weatherForecasts"
            InitNewRow="@OnInitNewRow"
            RowInserting="@((newValues) => OnRowInserting(newValues))"
            RowUpdating="@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))"
            RowRemoving="@((dataItem) => OnRowDeleting(dataItem))">
    <DxDataGridCommandColumn />
    @*other columns 
    ...*@
</DxDataGrid>

@code {
    // declare the weatherForecasts collection
    // ...

    void OnRowInserting(Dictionary<string, object> itemProperties) {
        weatherForecasts.Add(UpdateItem(new WeatherForecast(), itemProperties));
    }
    void OnRowDeleting(WeatherForecast item) {
        weatherForecasts.Remove(item);
    }
    void OnRowUpdating(WeatherForecast item, Dictionary<string, object> itemProperties) {
        UpdateItem(item, itemProperties);
    }

    Task OnInitNewRow(Dictionary<string, object> values) {
        values.Add("Date", DateTime.Now);
        values.Add("TemperatureC", 13);
        values.Add("CloudCover", "Sunny");
        return Task.CompletedTask;
    }

    static WeatherForecast UpdateItem(WeatherForecast item, Dictionary<string, object> itemProperties) {
        foreach (var field in itemProperties.Keys) {
            switch (field) {
                case "Date":
                    item.Date = (DateTime)itemProperties[nameof(WeatherForecast.Date)];
                    break;
                case "TemperatureC":
                    item.TemperatureC = (int)itemProperties[nameof(WeatherForecast.TemperatureC)];
                    break;
                case "Precipitation":
                    item.Precipitation = (bool)itemProperties[nameof(WeatherForecast.Precipitation)];
                    break;
            }
        }
        return item;
    }
}

The command column contains buttons that allow users to manage rows.

Sort Data

Use the following operations to sort data in the grid:

Click the Temperature column header to sort data against this column.
Click the Temperature and Precipitation column headers with the Shift key pressed to sort data against two columns.
Click the column headers with the Ctrl key pressed to clear sorting.

Note

The Data Grid component requires the Iconic library that is included in the Microsoft Blazor template. Reference this resource to show sort, group, and other icons. For more information about icons, refer to the following topic: Icons.

You can use the SortOrder and SortIndex properties to sort data in code.

Index.razor

<DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)" 
                          ...
                          SortOrder="DataGridColumnSortOrder.Descending" 
                          SortIndex="0" />
<DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)" 
                          ...
                          SortOrder="DataGridColumnSortOrder.Ascending"
                          SortIndex="1" />

Group Data

To enable users to group data, set the ShowGroupPanel property to true.

Index.razor

<DxDataGrid Data="@weatherForecasts"
            ...
            ShowGroupPanel="true">
</DxDataGrid>

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

Filter Data

To enable users to filter data, set the ShowFilterRow property to true.

Index.razor

<DxDataGrid Data="@weatherForecasts"
            ...
            ShowFilterRow="true">
</DxDataGrid>

Complete Code

Show Complete Code

Index.razor

@page "/Index"
@using System.Collections.ObjectModel

<DxDataGrid Data="@weatherForecasts"
            InitNewRow="@OnInitNewRow"
            RowInserting="@OnRowInserting"
            RowUpdating="@OnRowUpdating"
            RowRemoving="@OnRowDeleting"
            ShowFilterRow="true"
            ShowGroupPanel="true">
   <DxDataGridCommandColumn></DxDataGridCommandColumn>
   <DxDataGridDateEditColumn Field="@nameof(WeatherForecast.Date)" 
                             DisplayFormat="D" 
                             EditorFormat="d"/>
   <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)" 
                             Caption="Temperature" 
                             TextAlignment="DataGridTextAlign.Left"
                             Width="100px" 
                             SortOrder="DataGridColumnSortOrder.Descending" 
                             SortIndex="0"/>  
   <DxDataGridColumn Field="@nameof(WeatherForecast.CloudCover)" />
   <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitation)" 
                             Width="100px"  
                             SortOrder="DataGridColumnSortOrder.Ascending" 
                             SortIndex="1"/>
</DxDataGrid>

@code {
   public class WeatherForecast {
       public DateTime Date { get; set; }
       public int TemperatureC { get; set; }
       public bool Precipitation { get; set; }
       public string CloudCover { get; set; }
   }    
   static readonly Random random = new Random();
   readonly ObservableCollection<WeatherForecast> weatherForecasts = new ObservableCollection<WeatherForecast>();

   protected override void OnInitialized() {
       String[] CloudCover = {"Sunny", "Partly cloudy", "Cloudy", "Storm"};

       foreach (var date in Enumerable.Range(1, 30).Select(i => DateTime.Now.Date.AddDays(i))) {
          weatherForecasts.Add(new WeatherForecast() {
              Date = date,
              TemperatureC = random.Next(10, 20),
              Precipitation = Convert.ToBoolean(random.Next(0, 2)),
              CloudCover = CloudCover[random.Next(0,CloudCover.Length)]
          });
       }
   }

   void OnRowInserting(Dictionary<string, object> itemProperties) {
       weatherForecasts.Add(UpdateItem(new WeatherForecast(), itemProperties));
   }
   void OnRowDeleting(WeatherForecast item) {
       weatherForecasts.Remove(item);
   }
   void OnRowUpdating(WeatherForecast item, Dictionary<string, object> itemProperties) {
       UpdateItem(item, itemProperties);
   }

   Task OnInitNewRow(Dictionary<string, object> values) {
       values.Add("Date", DateTime.Now);
       values.Add("TemperatureC", 13);
       values.Add("CloudCover", "Sunny");
       return Task.CompletedTask;
   }

   static WeatherForecast UpdateItem(WeatherForecast item, Dictionary<string, object> itemProperties) {
       foreach (var field in itemProperties.Keys) {
           switch (field) {
               case "Date":
                   item.Date = (DateTime)itemProperties[nameof(WeatherForecast.Date)];
                   break;
               case "TemperatureC":
                   item.TemperatureC = (int)itemProperties[nameof(WeatherForecast.TemperatureC)];
                   break;
               case "Precipitation":
                   item.Precipitation = (bool)itemProperties[nameof(WeatherForecast.Precipitation)];
                   break;
           }
       }
       return item;
   }
}

More Features

For the complete list of Blazor Data Grid features, refer to the following help topic: Feature List / Online Demos.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Create an Application

Add a Data Grid and Bind It to Data

Add Columns

Edit Data

Sort Data

Group Data

Filter Data

Complete Code

More Features