Skip to main content
All docs
V25.1
  • DxTreeList.FocusedRowChanged Event

    Fires when row focus changes.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.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