Hierarchical data display is a very common way of presenting related data. With the 2014v3 release of Studio for ASP.NET Wijmo, C1GridView now supports Hierarchical display. C1GridView, displays the hierarchical data with multilevel, multiple layouts and provide features such as sorting, filtering, grouping and editing. Here is how a hierarchical C1GridView looks like: This tutorial guides you through the process of creating a hierarchical C1GridView. We shall consider a scenario, where in we will display what products were ordered by the customers at what price and in what quantity. The first level of hierarchy would display the customer details which will be drilled down to the product details, with an intermediate level which specifies the product ordered.

Get the Data from the Database

The foremost step is to gather the data which needs to be rendered in C1GridView. We would create three DataSource Controls, where in each control is configured to get the data from a table in the database based on a WHERE clause.

• The first DataSource control "CustomersDataSource" is bound to the "Customers" table, so it gets the list of customers: SELECT TOP 5 * FROM [Customers]
• The second DataSource control "OrdersDataSource" is bound to the "Orders" table and would get the data based on the CustomerID: SELECT * FROM [Orders] WHERE ([CustomerID] = ?)
• The third DataSource control "OrderDetailsDataSource" is bound to the "OrderDetails" table and would get the data based on the OrderID: SELECT * FROM [Order Details] WHERE ([OrderID] = ?)

Create DetailGridView

Bind each DetailGridView to a DataSource control

Now, we will add two DetailGridview to C1GridView, so as to define the two levels of hierarchy. Each DetailGridview will be binded to a DataSource control, so as to get the data to be displayed in the grid. The "CustomersDataSource" Datasource control will be bound to C1Gridview, the first DetailGridView will be bound to "OrdersDataSource" DataSource control and finally the last DetailGridview will be bound to the "OrderDetailsDataSource" DataSource control.

Define MasterDetailRelation between DetailGridView's

MasterDetailRelation property of each detail section is used to specify how its data links to the parent view's table. This property is implemented for each detail section to link the childtable and the parent table. It allows you to link two different tables from the data source by specifying MasterDataKeyName and DetailDataKeyName property. The value of MasterDataKeyName property in the MasterDetailRelation should match the DataKeyNames of the parent table in the corresponding relation. Here is the complete markup for the hierarchical C1GridView:

<wijmo:C1GridView ID="Customers" runat="server" DataSourceID="AccessDataSource1" DataKeyNames="CustomerID" AutogenerateColumns="False" AllowSorting="True"  
                        AllowPaging="True" PageSize="2" AllowColMoving="True" style="top: 0px; left: 0px">  
  <Columns>  
    <wijmo:C1BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />  
    <wijmo:C1BoundField DataField="Country" HeaderText="Country" SortExpression="Country" />  
    <wijmo:C1BoundField DataField="City" HeaderText="City" SortExpression="City">  
    </wijmo:C1BoundField>  
  </Columns>  

  <Detail>  
     <wijmo:C1DetailGridView runat="server" ID="Orders" DataSourceID="AccessDataSource2" DataKeyNames="OrderID" AutogenerateColumns="false" AllowSorting="true" AllowPaging="true" PageSize="2" AllowColMoving="true">  
        <Columns>  
            <wijmo:C1BoundField DataField="ShippedDate" HeaderText="ShippedDate" SortExpression="ShippedDate" />  
            <wijmo:C1BoundField DataField="Freight" HeaderText="Freight" SortExpression="Freight" />  
            <wijmo:C1BoundField DataField="ShipVia" HeaderText="ShipVia" SortExpression="ShipdVia" />  
        </Columns>  

        <Relation>  
           <wijmo:MasterDetailRelation DetailDataKeyName="CustomerID" MasterDataKeyName="CustomerID" />  
        </Relation>  

        <Detail>  
           <wijmo:C1DetailGridView runat="server" ID="Details" DataSourceID="AccessDataSource3" DataKeyNames="OrderID" AutogenerateColumns="false" AllowPaging="true" PageSize="2" AllowColMoving="true">  
              <Columns>  
                 <wijmo:C1BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />  
                 <wijmo:C1BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />  
                 <wijmo:C1BoundField DataField="Discount" HeaderText="Discount" SortExpression="Discount" />  
              </Columns>  

              <Relation>  
                 <wijmo:MasterDetailRelation DetailDataKeyName="OrderID" MasterDataKeyName="OrderID" />  
              </Relation>  
            </wijmo:C1DetailGridView>  
         </Detail>  
      </wijmo:C1DetailGridView>  
  </Detail>  
</wijmo:C1GridView>  

So, this creates a hierarchical C1GridView. Please note that currently you need to use the DataSource controls to create the hierarchical C1GridView. C# Sample VB Sample