Bind Grid Columns to Complex Fields

The dxDataGrid for ASP.NET Web Forms widget is designed so that you can easily bind a column to a data source field by specifying the DataField property for the column. However, there can be scenarios where a column needs to be bound to a complex field. For instance, if you have a grid displaying Products, you may need to add a column bound to a field of a related Category.

  • Product Name
  • Unit Price
  • Category
    • Category ID
    • Category Name
    • Description
  • Units In Stock

Grid with Complex Property

In terms of objects, a complex field can be a field of the nested object. In terms of tables, a complex field can be a field of a related table.

In this tutorial, you will learn how to bind columns of the dxDataGrid for ASP.NET Web Forms widget to complex fields by using two approaches.

  • Bind a Column to a Complex Field
    Values of a specified complex field will be displayed in the column.

  • Bind to a Lookup Table
    In this approach, you will have to bind a column to an extra data source, but a lookup editor will be used for displaying the column's cells when the grid works in an edit mode.

To start this tutorial, create an ASP.NET Empty Web Application application, construct an Entity data model for the Products and Categories tables from the Northwind database and add a Web Form with the dxDataGrid widget bound to the Products entity. To learn how to do this, refer to the Get Started with dxDataGrid for Web Forms tutorial.

Watch Video

Download Code

Bind to a Complex Field

Follow the steps below to add a column bound to the CategoryName field of the related Category entity.

  • Add a column to the grid using the Columns dialog.

    Add New Column

  • Bind the newly added column to the CategoryName property of the Category entity using the Category navigation property of the Product entity.
    Set the column's DataField property to Category.CategoryName.

    Set Data Field

  • Set an appropriate caption for the new column.
    Set the Caption property to Category.

    Set Caption

  • Specify the data source field that is required to be expanded to get values for the column bound to a complex field.
    Set the grid's ExpandDataFields property to Category.

    Set Field for Expansion

    NOTE: There can be several columns that are bound to complex fields. In this instance, set the ExpandDataFields property to a list of fields delimited by a comma.

  • For an Entity data source, specify the related objects to include to the query results.
    In the QueryCreated event handler of your EntityDataSource object, include the Category object to the query results.

    public partial class WebForm1 : System.Web.UI.Page {
        protected void EntityDataSource1_QueryCreated(object sender, QueryCreatedEventArgs e) {
            e.Query = (e.Query as ObjectQuery<Product>).Include("Category");
        }
    }

Result

Result

Bind to a Lookup Table

This approach is an alternative to the one detailed above.

Follow the steps below to add a column that will be bound to the Product's CategoryID field and will display the corresponding CategoryName.

  • Create a data source for the Category entity.
    Drop the EntityDataSource component from the Data category of the Toolbox to the design surface of the page. Configure the data source for the Category entity, as detailed in the Bind Data step of the Get Started with dxDataGrid for Web Forms tutorial.

    New Data Source

    Refresh the schema applied by the data source by clicking Refresh Schema in the smart tag menu of the entity data source component.

  • Add a column to the grid using the Columns dialog.

    Add New Column

  • Bind the newly added column to the CategoryID property of the Product entity.
    Set the column's DataField property to CategoryID.

    Set Data Field

  • Set an appropriate caption for the new column.
    Set the Caption property to Category.

    Set Caption

  • Provide a lookup data source for the added column.
    Choose the data source that you have recently added within the possible values of the column's Lookup.DataSourceID property.

    Set Lookup Data Source

  • Set the data source field whose values must be replaced and the data source field whose values must be displayed instead.
    Set the Lookup.ValueExpr property to CategoryID and the Lookup.DisplayExpr property to CategoryName.

    Set Lookup Expressions

Result

Result

If you make the grid editable, all possible CategoryName values will be available for setting in the Category column cells.

Result with Editing

If you enable filtering for the grid, all possible CategoryName values will be available as filter values.

Result with Filtering