How to: Dynamically Display the Focused Row's Values Outside the ASPxGridView

• Nov 12, 2021

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

Follow the steps below:

1. Declare the OnGridFocusedRowChanged() function that queries the server to return the employee ID and Notes. This function handles the ASPxClientGridView.FocusedRowChanged event.

2. Pass the returned array to the OnGetRowValues(values) function that defines values for the corresponding HTML elements.

The image below shows the result:

ASPX

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

JS

// The function is called when the focused row is changed.
function OnGridFocusedRowChanged() {
    // Query the server for the "EmployeeID" and "Notes" fields of the focused row. 
    // The values are 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];
}