DxTreeListSelectionColumn Class
A selection column.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxTreeListSelectionColumn :
DxTreeListColumn,
IGridSelectionColumn,
IGridColumn,
ITreeListSelectionColumn,
ITreeListColumnRemarks
Declare a DxTreeListSelectionColumn object in the Columns template to display the column that allows users to select and deselect rows. The column contains checkboxes or radio buttons depending on the selection mode.
Enable the AllowSelectRowByClick property to allow users to select and deselect rows by mouse clicks, tap gestures, and keyboard shortcuts.
The TreeList component uses the key field’s values to identify and compare data items. If your data object has a primary key, assign it to the KeyFieldName property. Otherwise, the TreeList uses standard .NET value equality comparison to identify data items.
Multiple Row Selection
When the SelectionMode property is set to Multiple (the default value), the selection column displays checkboxes. Users can click them to select and deselect individual rows. Note that the selection state of a parent node does not affect selection states of its child nodes and vice versa.
The checkbox in the column’s header selects or deselects all rows on the current page or on all TreeList pages depending on the SelectAllCheckboxMode property value. To hide this checkbox, disable the AllowSelectAll option.
Implement two-way binding for the SelectedDataItems property to specify and access data items that correspond to selected rows. Use the FixedPosition property to freeze the selection column and keep it visible on screen while users scroll the TreeList horizontally.
@inject EmployeeTaskService EmployeeTaskService
<DxTreeList Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
@bind-SelectedDataItems="@SelectedDataItems">
<Columns>
<DxTreeListSelectionColumn />
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" />
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
IReadOnlyList<object> SelectedDataItems { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
}
Single Row Selection
When the SelectionMode property is set to Single, the selection column displays radio buttons. Users can click a button to select one row at a time.
Implement two-way binding for the SelectedDataItem property to specify and access the data item that corresponds to the selected row. Use the FixedPosition property to freeze the selection column and keep it visible on screen while users scroll the TreeList horizontally.
@inject EmployeeTaskService EmployeeTaskService
<DxTreeList Data="TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId"
SelectionMode="TreeListSelectionMode.Single"
@bind-SelectedDataItem="@SelectedDataItem">
<Columns>
<DxTreeListSelectionColumn />
<DxTreeListDataColumn FieldName="Name" Caption="Task" />
<DxTreeListDataColumn FieldName="EmployeeName" />
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
</DxTreeList>
@code {
List<EmployeeTask> TreeListData { get; set; }
object SelectedDataItem { get; set; }
protected override void OnInitialized() {
TreeListData = EmployeeTaskService.GenerateData();
}
}
For more information about selection in the TreeList component, refer to the following topic: Selection and Focus in Blazor TreeList.