ASPxClientGridView.FocusedRowChanged Event
Fires when the row focus changes.
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 fires in the following cases:
- A user moves row focus.
- You change the FocusedRowIndex property value.
- You call the SetFocusedRowIndex(visibleIndex) method.
When the ProcessFocusedRowChangedOnServer property is set to true, the control raises the server ASPxGridView.FocusedRowChanged event.
When row focus is disabled, the FocusedRowChanged event does not fire.
Web Forms Example
The example below shows how to dynamically display a focused employee’s photo and details outside the grid.
<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" PreviewFieldName="Notes"
KeyFieldName="EmployeeID" AutoGenerateColumns="False" EnableRowsCache="false">
<Columns>
<%--...--%>
</Columns>
<ClientSideEvents FocusedRowChanged="OnGridFocusedRowChanged" />
<SettingsBehavior AllowFocusedRow="true" />
</dx:ASPxGridView>
<table style="width: 100%; height: 200px" class="OptionsTable TopMargin">
<tr>
<td style="width: 160px">
<dx:ASPxImage runat="server" ID="DetailImage" ClientInstanceName="DetailImage"
ClientVisible="false" Width="160px" />
</td>
<td class="LeftPadding">
<dx:ASPxMemo runat="server" ID="DetailNotes" ClientInstanceName="DetailNotes"
Width="100%" Height="170" ReadOnly="true" />
</td>
</tr>
</table>
function OnGridFocusedRowChanged(s, e) {
// Gets the focused row's "EmployeeID" and "Notes" field values.
// The OnGetRowValues() function returns these values.
DetailNotes.SetText("Loading...");
grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
}
function OnGetRowValues(values) {
DetailImage.SetImageUrl("FocusedRow.aspx?Photo=" + values[0]);
DetailImage.SetVisible(true);
DetailNotes.SetText(values[1]);
}
MVC Example
@Html.DevExpress().GridView(settings => {
settings.Name = "grid";
settings.KeyFieldName = "EmployeeID";
...
settings.ClientSideEvents.FocusedRowChanged = "OnGridFocusedRowChanged";
}).Bind(Model).GetHtml()
function OnGridFocusedRowChanged(s, e) {
s.GetRowValues(s.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
}
function OnGetRowValues(values) {
DetailPhoto.SetImageUrl("@GridViewRowsDemosHelper.GetEmployeeImageRouteUrl()?@GridViewRowsDemosHelper.ImageQueryKey=" + values[0]);
DetailNotes.SetText(values[1]);
}
See Also