blazor-403625-components-grid-get-started-with-grid.md
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 as described in the following topic: Get Started With DevExpress Components for Blazor.
Blazor Grid supports static render mode to display static data in a single page. For other features, you need to enable interactivity on a Razor page and allow the Grid component to execute scripts and display data.
@rendermode InteractiveServer
Make sure your project includes the following classes:
Use the following code for the classes:
Make sure that the WeatherForecastService service is registered in the Program.cs file.
Add <DxGrid></DxGrid> tags to the Pages/Index.razor page.
Inject the WeatherForecastService to the page.
In the @code block, declare a list of WeatherForecast objects – Data. Populate this list in the OnInitialized lifecycle method.
Use the Data property to bind the Grid to the Data list.
<Columns></Columns> to the component’s markup to define the Columns collection.Columns collection. Use the FieldName property to bind columns to data source fields (Date, Forecast, CloudCover, TemperatureC). Note that the FieldName property value must be unique for each data column.<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>
You can execute the following operations to sort data in the grid:
You can use SortOrder and SortIndex properties to specify initial sort settings.
<DxGridDataColumn FieldName="CloudCover"
Width="120px"
SortOrder="GridColumnSortOrder.Descending"
SortIndex="1" />
<DxGridDataColumn FieldName="TemperatureC"
Caption="Temperature"
Width="120px"
SortOrder="GridColumnSortOrder.Ascending"
SortIndex="0" />
Set the ShowGroupPanel property to true to enable users to group data.
<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.
<DxGridDataColumn FieldName="Forecast"
GroupIndex="0" />
Set the ShowFilterRow property to true to enable users to filter data.
<DxGrid Data="@Data"
...
ShowFilterRow="true">
</DxGrid>
Blazor Grid allows you to add total and group summaries. For example, follow the steps below to create the total summary.
<TotalSummary></TotalSummary> to the component’s markup to define the TotalSummary collection.TotalSummary collection and specify their properties (SummaryType, FieldName, and so on).<DxGrid Data="@Data"
... >
...
<TotalSummary>
<DxGridSummaryItem FieldName="Date"
SummaryType=GridSummaryItemType.Min
ValueDisplayFormat="D" />
<DxGridSummaryItem FooterColumnName="TemperatureC"
SummaryType=GridSummaryItemType.Count />
</TotalSummary>
</DxGrid>
Follow the steps below to allow users to edit data:
Declare a DxGridCommandColumn object in the Columns collection. The command column contains buttons that allow users to edit and delete rows.
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.
Implement handlers for the following events to post the changes to the data source:
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.
Show Complete Code
@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);
}
}
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; }
}
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());
}
}
For additional information about Grid features, refer to the root topic.