ASPxClientGridView Class

A client-side equivalent of the ASPxGridView object.

Declaration

declare class ASPxClientGridView extends ASPxClientGridBase

Remarks

The ASPxClientGridView object serves as a client-side equivalent of the ASPxGridView control, and replicates the server-side functionality implemented by the ASPxGridView. In that way, a comprehensive client object model allows you to process, navigate and manipulate data directly on the client by writing appropriate JavaScript code.

Note

The ASPxClientGridView class has an MVC-related equivalent. Refer to the MVCxClientGridView class for more information.

Example

This example illustrates how to use the ASPxClientGridView object.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server" SettingsBehavior-AllowFocusedRow="true" ClientInstanceName="grid" 
    AutoGenerateColumns="False" DataSourceID="SqlDataSource1" KeyFieldName="ProductID" Theme="MaterialCompact">
    <Columns>
        <dx:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" VisibleIndex="0">
            <EditFormSettings Visible="False" />
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="1">
        </dx:GridViewDataTextColumn>
        <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="2">
        </dx:GridViewDataTextColumn>
    </Columns>
</dx:ASPxGridView>    
<br />
<dx:ASPxLabel ID="ASPxLabel1" ClientInstanceName="label" runat="server" Text="">
</dx:ASPxLabel>
<p>Click the button to get the "Product Name" column's value of the selected row.</p>
<dx:ASPxButton ID="ASPxButton1" runat="server" Text="Get Value" AutoPostBack="False">
    <ClientSideEvents Click="function(s, e) {
        grid.GetRowValues(grid.GetFocusedRowIndex(), 'ProductName', OnSetLabelText);
    }" />
</dx:ASPxButton>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="
    Provider=Microsoft.Jet.OLEDB.4.0;
    Data Source=|DataDirectory|\nwind.mdb;
    Persist Security Info=True" 
    ProviderName="System.Data.OleDb" 
    SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice], [UnitsInStock] FROM [Products]">
</asp:SqlDataSource>

JS

function OnSetLabelText(Value) {
    label.SetText('Selected product name: ' + Value);
}

Result:

Inheritance

ASPxClientControlBase

ASPxClientControl

ASPxClientGridBase

ASPxClientGridView

BootstrapClientGridView

MVCxClientGridView