Get Started with Grid View

Jul 19, 2022
3 minutes to read

This topic describes how to get started with ASPxGridView.

Add a GridView

Drop the ASPxGridView control from the Visual Studio toolbox onto the form.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server">
</dx:ASPxGridView>

Bind To Data

Create a data source and apply its ID to the control’s DataSourceID property to bind the control to this data source. Specify the control’s KeyFieldName property to add, edit, or delete rows.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"
DataSourceID="SqlDataSource1" KeyFieldName="ProductID">
</dx:ASPxGridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NWindConnectionString %>"
DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID"
InsertCommand="INSERT INTO [Products] ([ProductName], [UnitPrice], [UnitsInStock], [Discontinued]) VALUES (@ProductName, @UnitPrice, @UnitsInStock, @Discontinued)"
SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice], [UnitsInStock], [Discontinued] FROM [Products]"
UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [UnitPrice] = @UnitPrice, [UnitsInStock] = @UnitsInStock, [Discontinued] = @Discontinued WHERE [ProductID] = @ProductID">
    <DeleteParameters>
        <asp:Parameter Name="ProductID" Type="Int32" />
    </DeleteParameters>
    <InsertParameters>
        <asp:Parameter Name="ProductName" Type="String" />
        ...
    </InsertParameters>
    <UpdateParameters>
        <asp:Parameter Name="ProductName" Type="String" />
        ...
    </UpdateParameters>
</asp:SqlDataSource>

Add Columns

The ASPxGridView.Columns property stores the control’s column collection. If the AutoGenerateColumns property value is true, the control automatically creates the columns and a grid’s layout at design-time data binding. You can disable the AutoGenerateColumns property and specify ASPxGridView columns manually.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"
DataSourceID="SqlDataSource1" KeyFieldName="ProductID"
AutoGenerateColumns="false">
    <Columns>
        <dx:GridViewCommandColumn VisibleIndex="0" />
        <dx:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="2" />
        <dx:GridViewDataTextColumn FieldName="UnitPrice" VisibleIndex="3" />
        <dx:GridViewDataTextColumn FieldName="UnitsInStock" VisibleIndex="4" />
        <dx:GridViewDataCheckColumn FieldName="Discontinued" VisibleIndex="5" />
    </Columns>
</dx:ASPxGridView>

Add Command Items

The ASPxGridView control allows you to edit its data, and select, add, or delete rows in the grid. Define the control’s GridViewCommandColumn object and use its properties to specify which command items to display within a command column.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"
DataSourceID="SqlDataSource1" KeyFieldName="ProductID"
AutoGenerateColumns="false">
    <Columns>
        <dx:GridViewCommandColumn VisibleIndex="0"
            SelectAllCheckboxMode="Page"
            ShowDeleteButton="True"
            ShowEditButton="True" 
            ShowNewButtonInHeader="True"
            ShowSelectCheckbox="True" />
        ...
    </Columns>
</dx:ASPxGridView>

Sort Data

ASPxGridView allows you to sort its data. Set the AllowSort property to true and use the SortMode property to specify the control’s sort mode.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"
DataSourceID="SqlDataSource1" KeyFieldName="ProductID"
AutoGenerateColumns="false">
    <SettingsBehavior AllowSort="true" />
    ...
</dx:ASPxGridView>

Filter Data

ASPxGridView allows you to filter its data. Enable the ShowFilterRow and ShowFilterRowMenu properties to display the filter row and the filter row button. Use the GridViewCommandColumn.ShowClearFilterButton property to specify whether to display the Clear Filter command item within the command column.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"
DataSourceID="SqlDataSource1" KeyFieldName="ProductID"
AutoGenerateColumns="false">
    ...
    <Settings ShowFilterRow="True" ShowFilterRowMenu="true" />
    <Columns>
        <dx:GridViewCommandColumn VisibleIndex="0"
            ...
            ShowClearFilterButton="True" />
    </Columns>
</dx:ASPxGridView>

Group Data

ASPxGridView allows you to group its data columns. Enable the ShowGroupPanel property to display the group panel in the control’s header.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"
DataSourceID="SqlDataSource1" KeyFieldName="ProductID"
AutoGenerateColumns="false">
    ...
    <Settings ShowFilterRow="True" ShowFilterRowMenu="true"
        ShowGroupPanel="True" />
    ...
</dx:ASPxGridView>

Search Data

Set the ASPxGridSearchPanelSettings.Visible property to true to enable the search panel in the ASPxGridView control. Use the ASPxGridView.SettingsSearchPanel property to access the search panel settings.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"
DataSourceID="SqlDataSource1" KeyFieldName="ProductID"
AutoGenerateColumns="false">
    ...
    <SettingsSearchPanel Visible="True" />
    ...
</dx:ASPxGridView>