The requested page is not available for the requested platform. You are viewing the content for Default platform.

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 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> 

Columns

<DxDataGrid> ships with the following predefined column types:

Use the Field property to bind a column to a data source field.

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

<DxDataGrid Data=@DataSource>
    <DxDataGridCommandColumn Width="150px"></DxDataGridCommandColumn>
    <DxDataGridColumn Field=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)"></DxDataGridColumn>
    <DxDataGridSpinEditColumn Field=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)"></DxDataGridSpinEditColumn>
    <DxDataGridComboBoxColumn Field=@nameof(WeatherForecast.Summary) Caption="Summary" Data=@summaries></DxDataGridComboBoxColumn>
    <DxDataGridDateEditColumn Field=@nameof(WeatherForecast.Date)></DxDataGridDateEditColumn>
</DxDataGrid>

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 raises. Use this event to handle the row click.

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 grid column. The editor type depends on the corresponding column's type.

Blazor-DataGrid-Edit-Form

Once a user has clicked Update or removed a row, post all changes to a 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 / RowEditCancel

Fire when a user starts/cancels row editing.

RowInsertStart

Fires when a grid opens an edit form.

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

Filter Data

The Filter Row allows a user to filter grid data by individual column values. The filter is applied on the fly when the user enters text within the Filter Row.

Blazor-DataGrid-Filter

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

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.

Inheritance

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