DxGrid.FocusedRowChanged Event

Fires when the row focus changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Parameters

Type	Description
GridFocusedRowChangedEventArgs	An object that contains data for this event.

Remarks

When the FocusedRowEnabled property is set to true, the grid 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 Grid 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 group or new row is focused or the Grid 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 SetFocusedDataItemAsync(Object) or SetFocusedRowIndex(Int32) method.
• The Grid 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: Grid - Focused Row View Example: How to display the Chart based on the Grid focus

In the following code snippet, the FocusedRowChanged event is handled to display additional information about the currently focused employee.

<DxGrid Data="GridData" PageSize="5"
        FocusedRowEnabled="true" FocusedRowChanged="Grid_FocusedRowChanged">
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
</DxGrid>

<DxFormLayout>
    <DxFormLayoutItem Caption="@MemoCaption" CaptionPosition="CaptionPosition.Vertical" 
                      Visible="@ShowMemo" ColSpanMd="12">
        <DxMemo Text=@Notes Rows="4"/>
    </DxFormLayoutItem>
</DxFormLayout>

@code {
    string MemoCaption { get; set; }
    string Notes { get; set; }
    bool ShowMemo { get; set; }

    void Grid_FocusedRowChanged(GridFocusedRowChangedEventArgs e) {
        if(e.DataItem != null) {
            ShowMemo = true;
            var employee = (Employee)e.DataItem;
            MemoCaption = employee.FirstName + " " + employee.LastName + " details:";
            Notes = employee.Notes;
        }
        else {
            ShowMemo = false;
        }
    }

    object GridData { get; set; }
    protected override async Task OnInitializedAsync() {
        GridData = await NwindDataService.GetEmployeesAsync();
    }
}

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