Tab

ASPxGridView Class

A grid control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v20.2.dll

Declaration

public class ASPxGridView :
    ASPxGridBase,
    ISummaryItemsOwner
Public Class ASPxGridView
    Inherits ASPxGridBase
    Implements ISummaryItemsOwner

Remarks

The ASPxGridView is a data bound control that displays data from a data source in grid format. The grid displays data source fields and records as columns and rows in a table.

ASPxGridView_Class

Create a Grid View

Design Time

The ASPxGridView control is available on the DX.20.2: Data & Analytics toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control's settings, or paste the control markup in the page's source code.

NOTE

To properly function, DevExpress controls require that special modules, handlers and options are registered in the the Web.config file. Switch the Microsoft Visual Studio IDE to the Design tab to automatically update the Web.config file with the required DevExpress information.

<dx:ASPxGridView ID="ASPxGridView1" runat="server" 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>
<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>

Run Time

<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>
using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)  {
    ASPxGridView grid1 = new ASPxGridView();
    grid1.ID = "grid1";
    Page.Form.Controls.Add(grid1);
    grid1.AutoGenerateColumns = false;
    grid1.DataSourceID = "SqlDataSource1";
    grid1.KeyFieldName = "ProductID";
    grid1.Columns.AddRange(new GridViewDataColumn[]{
        new GridViewDataColumn { FieldName="ProductID", ReadOnly = true, VisibleIndex = 0},
        new GridViewDataColumn() { FieldName = "ProductName", VisibleIndex = 1 },
        new GridViewDataColumn() { FieldName = "UnitPrice", VisibleIndex = 2 },
    });
}

KB Article: How to create controls dynamically

Client-Side API

Availability

Available by default.

Client object type

ASPxClientGridView

Access name

ASPxGridView.ClientInstanceName

Events

ASPxGridView.ClientSideEvents

Data Binding

The ASPxGridView works only in bound mode. You can bind the grid to any standard data source type: SqlDataSource, ObjectDataSource, XmlDataSource, AccessDataSource, and SiteMapDataSource.

Use the KeyFieldName property to set a data source's key field name. The DataSourceID and DataSource specify the data source's ID and the data source object, respectively.

ASPxGridView.DataSourceID:

<dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" 
DataSourceID="SqlDataSource1" KeyFieldName="ProductID" >
</dx:ASPxGridView>
<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>

ASPxGridView.DataSource:

SqlDataSource dataSource1 = new SqlDataSource(@"Provider=Microsoft.Jet.OLEDB.4.0;
    Data Source=|DataDirectory|\nwind.mdb;Persist Security Info=True", 
    "SELECT [CategoryName] FROM [Categories] WHERE ([CategoryID] = @param)");
dataSource1.SelectParameters.Add("@param", selectedItemID);
dataSource1.ProviderName = "System.Data.OleDb";
dataSource1.ID = "DataSource1";
...
gridView.DataSource = dataSource1;
gridView.KeyFieldName = "CategoryID";
gridView.DataBind();
...

Learn more | See demo

Database Server Mode

The grid supports database server mode. In this mode, the grid loads only required items to the server memory and implements data-aware operations (for example, filtering) at the database level.

Learn more | See demo

Unbound Columns

The grid control supports unbound columns that are not bound to any data source field. Use the CustomUnboundColumnData event or specify the UnboundExpression property to populate an unbound column with data.

GridViewDataColumn.UnboundExpression:

<dx:ASPxGridView ID="Grid" runat="server" DataSourceID="ProductsDataSource" KeyFieldName="OrderID" >
    <Columns>
        <dx:GridViewDataSpinEditColumn FieldName="UnitPrice" />
        <dx:GridViewDataSpinEditColumn FieldName="Quantity" />
        <dx:GridViewDataSpinEditColumn FieldName="Discount" />
        <dx:GridViewDataTextColumn FieldName="Total" UnboundType="Decimal" 
            UnboundExpression="UnitPrice*Quantity*(1-Discount)" />
    </Columns>
</dx:ASPxGridView>

ASPxGridView.CustomUnboundColumnData event:

<dx:ASPxGridView ID="Grid" runat="server" DataSourceID="ProductsDataSource" KeyFieldName="OrderID" OnCustomUnboundColumnData="Grid_CustomUnboundColumnData" >
    <Columns>
        <dx:GridViewDataSpinEditColumn FieldName="UnitPrice" />
        <dx:GridViewDataSpinEditColumn FieldName="Quantity" />
        <dx:GridViewDataSpinEditColumn FieldName="Discount" />
        <dx:GridViewDataTextColumn FieldName="Total" UnboundType="Decimal" />
    </Columns>
</dx:ASPxGridView>
protected void Grid_CustomUnboundColumnData(object sender,
    ASPxGridViewColumnDataEventArgs e) {
    if (e.Column.FieldName == "Total") {
        decimal unitPrice = Convert.ToDecimal(e.GetListSourceFieldValue("UnitPrice"));
        int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));
        decimal discount = Convert.ToDecimal(e.GetListSourceFieldValue("Discount"));
        e.Value = unitPrice * quantity * (1 - discount);
    }
}

Learn more

Columns Management

The grid control displays data in a table format. Data sources provide data as