ASPxClientGridView.FocusedRowChanged Event

Fires in response to changing row focus.

Declaration

FocusedRowChanged: ASPxClientEvent<ASPxClientGridViewFocusEventHandler<ASPxClientGridView>>

Event Data

The FocusedRowChanged event's data class is ASPxClientGridViewFocusEventArgs. The following properties provide information specific to this event:

Property	Description
isChangedOnServer	Gets whether the row focusing has been changed on the server.
processOnServer	Specifies whether or not to process the event on the server. Inherited from ASPxClientProcessingModeEventArgs.

Remarks

The FocusedRowChanged event is raised when an end-user moves focus from one row to another. The focused row’s index is returned by the ASPxClientGridView.GetFocusedRowIndex method.

The focused row feature is enabled if the ASPxGridViewBehaviorSettings.AllowFocusedRow property is set to true.

Example

This example illustrates how to dynamically display a focused employee’s photo and details outside the grid.

In the example, handle the ASPxClientGridView.FocusedRowChanged event to call the OnGridFocusedRowChanged() function. This function queries the server to return the employee’s ID and Notes. Pass the returned array to the OnGetRowValues() function that specifies values for corresponding HTML elements.

The image below shows the result:

ASPX

<dx:ASPxGridView ID="ASPxGridView1" ClientInstanceName="grid">
    <ClientSideEvents FocusedRowChanged="OnGridFocusedRowChanged" />
</dx:ASPxGridView>

JS

//function is called on changing focused row
function OnGridFocusedRowChanged() {
    // Query the server for the "EmployeeID" and "Notes" fields from the focused row 
    // The values will be returned to the OnGetRowValues() function     
    grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
}
//Value array contains "EmployeeID" and "Notes" field values returned from the server 
function OnGetRowValues(values) {
    var notes = document.getElementById("detailnotes");
    notes.value = values[1];
    var image = document.getElementById("detailimage");
    image.src = "FocusedRow.aspx?Photo=" + values[0];
}