Telerik UI for ASP.NET AJAX

There are two general steps to implement hierarchical grid:

  1. Design the hierarchy

    In this step, using the designer or code-behind you should specify the structure of the hierarchical tables. This is related to populating the collection of DetailTables of RadGrid MasterTableView and the corresponding columns. It is important that this step should be completed before Telerik RadGrid is bound to any data. For example the grid can have a similar structure:

     

    - MasterTableView

      - DetailTable(0)

        - DetailTable(0, 0)

     

    Each detail table (including the MasterTableView) is control of type GridTableView. This means each control is represented by an HTML table (runtime) object. This table has RenderColumns, Columns andAutoGeneratedColumns collections

     

    (see Getting familiar with the server side API)

     

    properties for settings style, group and sort expressions, etc. The whole structure of Telerik RadGrid and its detail tables is saved in the ViewState. Therefore if you build a grid programmatically, you can safely do this on PageInit or Page_Load when Not Page.IsPostBack:

     

    (see Programmatic grid creation)

     

    Here is a live example (presenting programmatic creation of a grid) which demonstrates the capability of Telerik RadGrid to save its structure in the ViewState :

     

    Creating hierarchy/grouping programmatically

  2. This is the more complex step. During runtime (when data-binding) Telerik RadGrid builds special structure of items corresponding to the structure of the detail tables. For each item in the master table a new control - GridTableView - will be created and will be assigned as a child of the master item. This control will be a copy of the corresponding table - that should be DetailTable(0).

    Hence, if you have 3 items in the MasterTableView in the second level of hierarchy the grid will look like this:

     

    MasterTableView

    + Item(0)

       DetailTable0(copy 0)

    + Item(1)

       DetailTable0 (copy 1)

    + Item(2)

       DetailTable0 (copy 2)

     

    Here Item(0) is a parent item for DetailTable(0). You can obtain its instance using the GridTableView.ParentItem property. As in our example, there is a third level of the hierarchy (note each of the items of the copies of DetailTable(0) will have a detail table) which is a copy of DetailTable(0, 0). For example, let's say that the copy of DetailTable(0) with index 0 has 2 items:

     

    DetailTable0 (copy 0)

    + Item(0)

       DetailTable(0, 0) (copy 0)

    + Item(1)

       DetailTable(0, 0) (copy 1)

     

    Each copy of the detail tables should be bound to populate its items. Telerik RadGrid delegates full control of how this can be done to the developer - you should filter or select just the records that correspond to each detail table. Telerik RadGrid only restricts when this will happen -either through declarative relations or DetailTableDataBind event:

     

    Declarative hierarchy relations

     

    Building hierarchy with DetailTableDataBind event handling

     

    If you choose the second approach, Telerik RadGrid fires DetailTableDataBind for each DetailTable that is about to be bound. This event raising also depends on the HierarchyLoadMode of the corresponding GridTableView. If the HierarchyLoadMode is ServerBind the DetailTableDataBind event will be fired immediately after the corresponding parent item is bound. If it is ServerOnDemand, the detail table will be bound as soon as its parent item is expanded. You can find more about the hierarchy load modes in this help topic:

     

    Hierarchy load modes

     

    Inside the DetailTableDataBind event handler you can determine which the detail table about to be data-bound is using its DataMember property. This property should have unique value assigned in step 1.

See Also