In this video we’ll look at how to Get Started with the DevExpress Grid for Blazor.
A Grid component allows you to present and manage data in a tabular format.
I’ll show you how to build a simple Blazor application that uses the grid to display and edit a weather forecast.
I’ve already created a new Blazor application using the DevExpress project template.
This project contains the WheatherForecast and WeatherForecastService classes.
I’ve modified their code a little to use them as a data source for my grid.
Now I’m going to add a Grid component to the application.
I go to Pages/Index.razor, and add the DxGrid open and close tags to the page.
In the Razor @code block, I declare a list of WeatherForecast objects – Data, and populate this list in the OnInitialized lifecycle method.
Then I use the Data property to bind the Grid to the Data list.
Now let’s add columns to the grid. First define the Columns collection.
Then add a DxGridDataColumn object and use the FieldName property to bind this column to a data source field.
This column will display date-time values.
Then add more data columns in the same way.
I run the application.
You can see that the grid displays four data columns. Let’s customize their appearance.
For the CloudCover column, I specify the width.
For the Temperature C column - the width and custom caption.
For the Date column, I specify the pattern used to format the column's display values.
I run the application again.
You can see that the column appearance has changed.
The Temperature and Cloud Cover have fixed widths. The date column displays long dates.
Now let’s see how users can sort grid data.
When I click the Temperature column header, data is sorted against this column.
To clear sorting, hold the Ctrl key and click the column header again.
You can also sort data against multiple columns. Hold the Shift key and click two column headers.
Plus, you can specify initial sort settings.
Back in Visual Studio, I specify the column’s index among sorted columns and the sort order.
Run the application again and you can see that data is already sorted.
The grid also allows users to group data by multiple columns.
To enable this feature, I set the ShowGroupPanel property to true.
Now the grid displays the group panel.
To group data by a column, just drag and drop the column header onto this panel.
You can also specify initial group settings in code.
Now let's look at how to filter grid data by individual column values.
I set the ShowFilterRow property to true and run the app.
The grid now displays the filter row where I can specify a filter expression for each column.
Our Blazor Grid also allows you to add total and group summaries.
For example, to create the total summary
I define the TotalSummary collection and add DxGridSummaryItem objects to it.
Then I specify object properties: FieldName, SummaryType, and so on.
The grid displays two total summary items.
This item shows the minimal value of all values in the Date column, and this item shows the total row count in the grid.
Now let’s enable users to edit data.
First, add a command column to the grid.
Then define the edit form’s content.
I add the EditFormTemplate to the markup and use the DxFormLayout component to display editors for all visible data columns.
The template’s Context parameter is used to access the EditModel.
I also need to implement handlers for the EditModelSaving and DataItemDeleting events.
These events fire when users change grid data.
Now the grid displays the command column.
This column contains buttons that allow users to manage rows.
They can create new rows or edit an existing row.
Users can also delete rows.
Here we can make sure that the row is deleted.
And that's it for this video. If you liked it, please give us a thumbs up. If you have any questions, please comment below.
And don’t forget to subscribe and ring the bell so you get notified anytime we release new content.
Thanks for watching and thankyou for choosing DevExpress.