DxGrid.SelectedDataItems Property
In multiple selection mode, specifies data items that correspond to selected Grid rows.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v22.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public IReadOnlyList<object> SelectedDataItems { get; set; }
Property Value
Type | Description |
---|---|
IReadOnlyList<Object> | A collection of data items. |
Remarks
The Grid supports multiple row selection when the SelectionMode property is set to GridSelectionMode.Multiple (the default value). Rows can be selected and deselected in the following ways:
- A user clicks rows to select or deselect them. To enable this functionality, set the AllowSelectRowByClick property to
true
. - A user clicks checkboxes in the selection column. To display this column, declare a DxGridSelectionColumn object in the Columns template.
- You call the
Select*
orDeselect*
method. Refer to the Grid’s member table for the list of available methods.
To access data items that correspond to the selected rows, use the SelectedDataItems
property as follows:
- Implement two-way binding for this property (
@bind-SelectedDataItems
) to specify the initially selected rows and automatically update the property value when selection changes. - Use one-way binding for this property and handle the SelectedDataItemsChanged event to implement a custom response to selection changes.
When you set the SelectionMode
property to GridSelectionMode.Single, you can use the SelectedDataItem property instead.
The following example allows users to click rows to select them and displays information about the selected rows:
@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable
<DxGrid Data="GridDataSource"
AllowSelectRowByClick="true"
@bind-SelectedDataItems="@SelectedDataItems"
KeyFieldName="ProductId">
<Columns>
<DxGridDataColumn FieldName="ProductName" />
<DxGridDataColumn FieldName="UnitPrice" />
<DxGridDataColumn FieldName="QuantityPerUnit" />
<DxGridDataColumn FieldName="UnitsInStock" />
</Columns>
</DxGrid>
<br/>
<div>
<b>Selected products:</b>
@foreach (var product in SelectedDataItems.Cast<Product>()) {
<li>@product.ProductName</li>
}
</div>
@code {
IEnumerable<object> GridDataSource { get; set; }
NorthwindContext Northwind { get; set; }
IReadOnlyList<object> SelectedDataItems { get; set; }
protected override void OnInitialized() {
Northwind = NorthwindContextFactory.CreateDbContext();
GridDataSource = Northwind.Products
.ToList();
SelectedDataItems = GridDataSource.Skip(1).Take(2).ToList();
}
public void Dispose() {
Northwind?.Dispose();
}
}
You can use the SelectedDataItems
property to delete the selected rows when a user clicks a button. Refer to the following example for more information: Grid for Blazor - How to delete selected rows.