The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.
Date
|
Forecast
|
Temp. (℃)
|
Cloud Cover
|
Precipitation
|
|
|---|---|---|---|---|---|
| Friday, January 10, 2025 | Cold | -4 | Partly cloudy |
|
|
| Saturday, January 11, 2025 | Cold | -5 | Sunny |
|
|
| Sunday, January 12, 2025 | Cold | -3 | Sunny |
|
|
| Monday, January 13, 2025 | Cold | -6 | Sunny |
|
|
| Tuesday, January 14, 2025 | Cold | -4 | Cloudy |
|
To display data in our Blazor Data Grid, bind it to a data collection and add columns. You can define columns in the Data Grid's markup, but cannot change the column collection at runtime. In this demo, the Data Grid contains the following predefined data column types:
- DxDataGridDateEditColumn (Date) — Displays date-time values and uses a drop-down calendar to edit these values.
- DxDataGridColumn (Forecast) — Displays strings and uses a text box to edit values.
- DxDataGridSpinEditColumn (Temp. (℃)) — Displays numeric values and uses a spin editor to edit these values.
- DxDataGridComboBoxColumn (Cloud Cover) — Displays any values and uses a combobox editor to edit values.
- DxDataGridCheckBoxColumn (Precipitation) — Displays disabled checkboxes and allows a user to change their states in the Edit Form.
Refer to the following documentation topic for more information on available column types: Columns.
Use the Field property to bind a column to a field from the Data Grid's data collection. The Data Grid generates a user-friendly column caption based on the field name. Use the Caption property to specify a custom column name.
Declare a DxDataGridCommandColumn object to add a command column. This column contains data management buttons that allow users to create, edit, and remove rows. Click the Edit button in any row to see the integrated data editors displayed by the columns listed above.
YouTube Video: Column Customization