DxGrid.FocusedRowChanged Event

Fires when the row focus changes.

Namespace: DevExpress.Blazor

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

Returns the visible index of the focused row or -1 if the Grid has no data to display.

DataItem

Returns the data item bound to the focused data row or null if a group row is selected or the Grid has no data to display.

The FocusedRowChanged event fires in the following cases:

• A user clicks a row to focus it
• 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 code sample below, 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.