In this video, you’ll learn about grid column types. I’ll show you how to customize grid columns and change their size and visibility.
I’ve already added the Grid component to the application and bound it to data. Data is fetched from the Northwind database.
Here I’ve created context and entity classes.
Now I’m going to add columns to my grid
First, I define the Columns collection.
Then I declare the DxGridDataColumn object.
The DxGrid supports bound and unbound data columns.
Bound columns get their data from the bound data source. To bind this column to a data source field, I use the FieldName property.
The column will display a product name.
I add more data columns in the same way.
Let's run the app.
You can see that the grid displays four data columns.
Now I’ll customize their appearance, for example, this column’s caption.
The grid generated this caption based on the field name. To change the caption, I use the Caption property.
I also specify the DisplayFormat property for several columns.
I run the app again and view the changes.
The Product Name caption now includes a space.
The Unit Price values now contain the currency symbol, the Discount column shows values with the percent symbol.
Now I’ll demonstrate how to add an unbound column that is not mapped to a data source field.
This column will display the total price.
I specify the UnboundType property and use the UnboundExpression property to specify an expression to evaluate the total price value.
And here is the Total Price column.
The DxGrid also allows you to add a command column that allows users to edit grid data.
To add this column, declare a DxGridCommandColumn object.
The command column displays CRUD-related buttons (New, Edit, and Delete) and the Clear button in the filter row if it’s shown.
To enable data editing in the grid, you need to handle some events.
For more information about this, we have another video – Blazor Grid: Enable Data Editing and Validate User Input.
The DxGrid can also display a selection column that allows users to select and deselect rows.
I declare the DxGridSelectionColumn object and run the app again.
Now I can select rows.
You can also manage column visibility. All the columns have the Visible and VisibleIndex properties.
For the command and selection columns, I’ll set the Visible property to "false" to hide these columns.
For the ProductName and Quantity columns, I set visible indexes.
Let's run the app.
Now you do not see the command and selection columns, and the Quantity column is next to the Product Name column.
The Blazor Grid also allows users to customize its column list via the integrated Column Chooser.
First, I add a reference to my grid.
Then I use the ShowColumnChooser method to display the Column Chooser.
This code adds a DxButton that invokes the Chooser.
I’ll also specify captions for the command and selection columns since their captions should be shown in the Column Chooser window.
The Column Chooser lists data, command, and selection columns. Users can display or hide columns, and reorder them.
You can also use the ShowInColumnChooser property to hide a column in the Column Chooser.
Let's run the app again.
As you can see, our grid displays the Total Price column, but the column chooser doesn’t show it, so users cannot hide this column.
Blazor Grid also allows you to specify the column width. Switch back to Visual Studio and specify the width for the Quantity column.
Let’s see the changes
I also can specify different resize modes for columns. For example, I can set the ColumnResizeMode property to NextColumn.
When a user resizes a column, the width of the column to the right changes, but the Grid’s total width does not change.
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 thank you for choosing DevExpress.