DxDataGrid<T> Class

A data grid component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxDataGrid<T> :
    DxDataGridBase<T>

Type Parameters

Name Description
T

The data item type.

Remarks

<DxDataGrid> allows you to present data in a tabular format.

Blazor-DataGrid-Overview

To add the <DxDataGrid> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxDataGrid>...</DxDataGrid> markup to your application.

  3. Bind the grid to data.

  4. Configure the component (see the sections below).

Bind to Data

Use the Data or DataAsync property to bind the grid to an IEnumerable<T> or IQueryable<T> data source.

NOTE

The Data Grid operates in bound mode only. Unbound mode is not supported.

<DxDataGrid Data="@DataSource">
    ...
</DxDataGrid> 

@inject WeatherForecastService ForecastService

@code {
    IEnumerable<WeatherForecast> DataSource;

    protected override async Task OnInitializedAsync()
    {
        DataSource = await ForecastService.GetForecastAsync();
    }
}

To bind the grid to a custom data source, assign the data source type to the component's T parameter and implement data load logic using the CustomData property.

Columns

<DxDataGrid> ships with the following predefined column types:

The columns are added at design time. You cannot change the column collection in runtime.

Use the Field property to bind a column to a data source field. You can also manage column visibility. To hide a column from a data grid, set its Visible property to false.

The following example demonstrates how to add all column types listed above. Refer to our GitHub repository for a sample data source.

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync">
    <DxDataGridCommandColumn></DxDataGridCommandColumn>
    <DxDataGridDateEditColumn Field="@nameof(WeatherForecast.Date)" DisplayFormatString="D" EditFormatString="D">
    </DxDataGridDateEditColumn>
    <DxDataGridColumn Field="@nameof(WeatherForecast.Summary)" Caption="Summary"></DxDataGridColumn>
    <DxDataGridSpinEditColumn Field="@nameof(WeatherForecast.TemperatureC)" Caption="@("Temp. (\x2103)")" 
        TextAlignment="@DataGridTextAlign.Left" ></DxDataGridSpinEditColumn> 
    <DxDataGridComboBoxColumn Field="@nameof(WeatherForecast.WeatherType)" Caption="Cloudiness" 
        DataAsync="@ForecastService.GetCloudinessAsync" TextAlignment="@DataGridTextAlign.Left" ></DxDataGridComboBoxColumn>
    <DxDataGridCheckBoxColumn Field="@nameof(WeatherForecast.Precipitates)"></DxDataGridCheckBoxColumn>
</DxDataGrid>

Blazor-DataGrid-Column-Types

Templates

Templates allow you to customize cell appearance and visual layout of the edit form.

Member

Description

DisplayTemplate

Specifies a template for displayed column values.

EditTemplate

Specifies a template for an editor that corresponds to the column within the edit form.

EditFormTemplate

Specifies a template for the entire edit form.

 <DxDataGridColumn Field="@nameof(Product.Availability)" Caption="Availability">
        <DisplayTemplate>
            @{
                var id = Guid.NewGuid().ToString();
                var inStock = (context as Product).Availability;
                <input id="@id" type="checkbox" checked="@inStock" disabled readonly />
                if (inStock)
                {
                    <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                }
                else
                {
                    <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                }
            }
        </DisplayTemplate>
        <EditTemplate>
            <DxComboBox Data="@(new List<string>() { "In stock", "Sold out" })"
                        SelectedItem="@(((bool)((CellEditContext)context).CellValue) ? "In stock" : "Sold out" )"
                        SelectedItemChanged="@(newCellValue => ((CellEditContext)context).OnChanged(newCellValue == "In stock"))">
            </DxComboBox>
        </EditTemplate>
    </DxDataGridColumn>

Row Selection

Once a user clicks a data row, the row is automatically highlighted (selected) and the SingleSelectedDataRowChanged event is raised.

Blazor-DataGrid-Select-a-Row

To disable row selection, set the SelectionMode property to None.

Edit Data

To display Edit and Delete commands within each data row, add a DxDataGridCommandColumn column to the grid. Once a user clicks Edit (or New) in this column, the grid displays the edit form. The edit form displays data editors for each visible grid column. The editor type depends on the corresponding column's type.

Blazor-DataGrid-Edit-Form

TIP

When virtual scrolling is enabled, the grid shows the edit form in a popup window.

If a column's data type is nullable, you can use the ClearButtonDisplayMode property to show the Clear button in the corresponding editor.

Once a user clicks Update or removes a row, all changes should be posted to the data source. To do so, handle the following events:

<DxDataGrid Data="@DataSource"
            RowInserting="@((newValues) => OnRowInserting(newValues))"
            RowUpdating="@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))"
            RowRemoving="@((dataItem) => OnRowRemoving(dataItem))">
    ...
</DxDataGrid>

The table below lists API members related to data editing:

Member

Description

RowEditStart / RowEditStartAsync

Fire when the edit form is opened to edit a data row.

RowInsertStart / RowInsertStartAsync

Fire when the edit form is opened to add a new data row.

RowEditCancel / RowEditCancelAsync

Fire when the edit form is closed and discards the changes.

StartRowEdit(Object)

Asynchronously opens the edit form for the specified data row or a new row.

CancelRowEdit()

Asynchronously closes the edit form and discard the changes.

Group Data

<DxDataGrid> allows you to group data by multiple columns. To group data by a column, a user should drag its header from the Column Header Panel and drop it onto the Group Panel.

Blazor_DataGrid_Group_UI

Users can group grid data when all the properties below are set to true:

Set a column's GroupIndex property to a zero-based integer value to group grid data in code.

<DxDataGrid Data="@Vacancies" ShowGroupPanel="true">
    <DxDataGridColumn Field="@nameof(Vacancy.Id)" AllowGroup="false"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(Vacancy.Description)"></DxDataGridColumn>
    <DxDataGridComboBoxColumn Field="@nameof(Vacancy.Region)" GroupIndex="0"></DxDataGridComboBoxColumn>
    <DxDataGridColumn Field="@nameof(Vacancy.City)" GroupIndex="1"></DxDataGridColumn>
</DxDataGrid>

The grid does not display grouped columns. Set the ShowGroupedColumns property to true to show grouped columns within the grid.

Blazor-DataGrid-ShowGroupedColumns

Drag a column header from the Group Panel back to the Column Header Panel to ungroup grid data by the column. To ungroup grid data in code, set the column's GroupIndex property to -1.

NOTE

Online Demo: Data Grid - Grouping

Sort Data

Click a column header to sort grid data by the corresponding column. To change the sort order, click the header once again.

Blazor-DataGrid-Sort

NOTE

Online Demo: Data Grid - Sort Data

Filter Data

The Filter Row allows a user to filter grid data by individual column values.

Blazor-DataGrid-Filter

The Filter Row displays different editors depending on the column types.

  • For the DxDataGridCheckBoxColumn, checkboxes are replaced with a combobox editor. The editor's items have the following captions: True, False, and (optionally) Indeterminate. You can also specify custom texts for the Filter Row.

  • For other column types, the Filter Row uses the same editors as in the edit form.

To hide the Filter Row, set the ShowFilterRow property to false.

NOTE

Online Demo: Data Grid - Filter Row

Paging

Use the PageSize property to specify the maximum number of data rows displayed on a page.

Blazor-DataGrid-Pager

To hide the pager, set the ShowPager property to false.

Virtual Scrolling

When virtual scrolling is activated (DataNavigationMode is set to VirtualScrolling), the grid loads data on demand when a user scrolls grid rows.

In this mode, the grid shows the edit form in a popup window.

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.GridJSInteropProxy>
DxControlComponent<DxDataGridBase<T>, DevExpress.Blazor.Internal.JSInterop.GridJSInteropProxy>
DxDataGridBase<T>
DxDataGrid<T>
See Also