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

• Aug 01, 2019

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

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];
}