ASPxClientGridView.GetRowValues(visibleIndex, fieldNames, onCallback) Method

Returns the values of the specified data source fields within the specified row.

Declaration

GetRowValues(
    visibleIndex: number,
    fieldNames: string,
    onCallback: ASPxClientGridViewValuesCallback
): void

Parameters

Name	Type	Description
visibleIndex	number	An integer value that identifies the data row’s index.
fieldNames	string	The names of data source fields separated by a semicolon, whose values within the specified row are returned.
onCallback	ASPxClientGridViewValuesCallback	An ASPxClientGridViewValuesCallback object that represents the JavaScript function which receives the list of row values as a parameter.

Remarks

Note

If you pass a single field as a fieldNames parameter to the GetRowValues method, the ASPxClientGridView.GetRowValues method’s onCallback parameter receives a single value as a parameter, rather than a list of row values.

In this case, your function should work with a single value instead of the list of values. A working example is shown in the code sample below:

JS

// function is called on changing focused row
function OnGridFocusedRowChanged() {
    // Query the server for the "EmployeeID" field from the focused row 
    // The single value will be returned to the OnGetRowValues() function     
    grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID', OnGetRowValues);
}
// Value contains the "EmployeeID" field value returned from the server, not the list of values
function OnGetRowValues(value) {
    // Right code
    alert(value);
    // This code will cause an error
    // alert(value[0]);
}

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.

WebForms approach:

Note

For a full example, see Grid Rows - Focused Row demo.

JS

function OnGridFocusedRowChanged() {
    grid.GetRowValues(grid.GetFocusedRowIndex(), 'EmployeeID;Notes', OnGetRowValues);
}
function OnGetRowValues(values) {
    var notes = document.getElementById("detailnotes");
    notes.value = values[1];
    var image = document.getElementById("detailimage");
    image.src = "FocusedRow.aspx?Photo=" + values[0];
}

ASPX

<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="EmployeesDataSource"
    KeyFieldName="EmployeeID" PreviewFieldName="Notes" AutoGenerateColumns="False" EnableRowsCache="false" Width="100%">
    <Columns>
        <dx:GridViewDataColumn FieldName="FirstName" />
        <dx:GridViewDataColumn FieldName="LastName" />
        <dx:GridViewDataColumn FieldName="BirthDate" AdaptivePriority="1" />
        <dx:GridViewDataColumn FieldName="Title" />
        <dx:GridViewDataColumn FieldName="HireDate" AdaptivePriority="0" />
        <dx:GridViewDataColumn FieldName="Notes" Visible="False" />
    </Columns>
    ...
    <SettingsBehavior AllowFocusedRow="true" />
    <ClientSideEvents FocusedRowChanged="function(s, e) { OnGridFocusedRowChanged(); }" />
    </dx:ASPxGridView>

MVC approach:

Note

For a full example, see Grid Rows - Focused Row demo.

JS

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

Razor (View)

<div class="details_form">
    Details:<br />
    @Html.DevExpress().Image(settings => {
        settings.Name = "DetailPhoto";
        settings.ControlStyle.CssClass = "image";
        settings.Width = 160;
        settings.Height = 170;
        settings.Properties.EnableClientSideAPI = true;
    }).GetHtml()
    @Html.DevExpress().Memo(settings => {
        settings.Name = "DetailNotes";
        settings.ControlStyle.CssClass = "memo";
        settings.ReadOnly = true;
        settings.Width = 530;
        settings.Height = 170;
        settings.Properties.EnableClientSideAPI = true;
    }).GetHtml()
</div>

Razor(Partial View)

@Html.DevExpress().GridView(settings => {
    settings.Name = "gvFocusedRow";
    settings.CallbackRouteValues = new { Controller = "Rows", Action = "FocusedRowPartial" };

    settings.KeyFieldName = "EmployeeID";
    settings.Width = Unit.Percentage(100);
    settings.Settings.ShowGroupPanel = true;
    settings.SettingsBehavior.AllowFocusedRow = true;

    settings.Columns.Add("FirstName");
    settings.Columns.Add("LastName");
    settings.Columns.Add("BirthDate").PropertiesEdit.DisplayFormatString = "d";
    settings.Columns.Add("Title");
    settings.Columns.Add("HireDate").PropertiesEdit.DisplayFormatString = "d";
    settings.Columns.Add("Notes").Visible = false;

    settings.ClientSideEvents.FocusedRowChanged = "OnGridFocusedRowChanged";

    DevExpress.Web.Demos.GridViewFeaturesHelper.SetupGlobalGridViewBehavior(settings);
}).Bind(Model).GetHtml()

The image below shows the result: