Skip to main content
All docs
V24.2

DxTreeList.FocusedRowChanged Event

Fires when row focus changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<TreeListFocusedRowChangedEventArgs> FocusedRowChanged { get; set; }

Parameters

Type Description
TreeListFocusedRowChangedEventArgs

An object that contains data for this event.

Remarks

When the FocusedRowEnabled property is set to true, the TreeList displays the focused row. Use the FocusedRowChanged event to handle focused row changes. The following event argument properties allow you to get information about the focused row.

VisibleIndex
If a data row is focused, this property returns this row’s visible index. The property returns -1 if a new row is focused or the TreeList displays no rows.
DataItem
If a data row is focused, this property returns the data item bound to this row. The property returns null if a new row is focused or the TreeList displays no rows.

The FocusedRowChanged event fires in the following cases:

  • A user clicks a row to focus it.
  • A data row switches to edit mode.
  • You call the SetFocusedRowIndex(Int32) method.
  • The TreeList moves focus to a row on the initial load or when visible rows change (for instance, when you apply a filter or sorting or a page changes).

Run Demo: TreeList - Focused Row

In the following code snippet, the TreeList component displays additional information about the focused space object:

@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxTreeList Data="TreeListData"
            ChildrenFieldName="Satellites"
            FocusedRowEnabled="true"
            FocusedRowChanged="TreeList_FocusedRowChanged">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" />
        <DxTreeListDataColumn FieldName="Volume10pow9KM3" DisplayFormat="N2">
            <HeaderCaptionTemplate>Volume, 10<sup>9</sup> &#215; km<sup>3</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="SurfaceGravity" DisplayFormat="N2">
            <HeaderCaptionTemplate>Gravity, m/s<sup>2</sup></HeaderCaptionTemplate>
        </DxTreeListDataColumn>
    </Columns>
</DxTreeList>

@if (FocusedSpaceObject != null) {
    <h5>@FocusedSpaceObject.Name</h5>
    <ul>
        <li><b>Radius</b>: @FocusedSpaceObject.MeanRadiusInKM.ToString("N2") km</li>
        <li><b>Density</b>: @FocusedSpaceObject.Density.ToString("N2") g/cm<sup>3</sup></li>
        <li><b>Gravity</b>: @FocusedSpaceObject.SurfaceGravity.ToString("N2") m/s<sup>2</sup></li>
    </ul>
}

@code {
    object TreeListData { get; set; }
    SpaceObject FocusedSpaceObject { get; set; }

    protected override async Task OnInitializedAsync() {
        TreeListData = SpaceObjectDataProvider.GenerateData();
    }
    void TreeList_FocusedRowChanged(TreeListFocusedRowChangedEventArgs e) {
        FocusedSpaceObject = e.DataItem as SpaceObject;
    }
}

TreeList Focused Row

For more information about row focus in the TreeList component, refer to the following topic: Selection and Focus in Blazor TreeList.

See Also