Detailgrid nested in grid column

[Robert]

Hello,

I saw a lot of nice examples about master/detail grids on your example pages. But I need to display my master/detail data in a different manner.
If there is only one detail record then all data (master and detail) should be displayed in one row, if there  are multiple detailrows then the first row should display the data of the master record together with the data of the first detail row. All further detailrows should only display the detail data. The result should look like follows (text in brackets is only for description):

MasterColumn1, MasterCol2, MasterCol3, DetailCol1,DetailCol2   (first detaildata record)
                                                                   DetailCol1,DetailCol2   (second detaildata record)
MasterColumn1, MasterCol2, MasterCol3, DetailCol1,DetailCol2   (first detaildata record)
                                                                   DetailCol1,DetailCol2   (second detaildata record)
                                                                   DetailCol1,DetailCol2   (third detaildata record)
MasterColumn1, MasterCol2, MasterCol3, DetailCol1,DetailCol2   (first and only detaildata record)


I could transfer my master/detail data in a flat table structure, leaving the master data empty for subsequent detail rows but then the structure gets lost after sorting.

Another possibility could be to display the detail data in a grid nested in a column, so I would have 3 mastercolumns and one column, that displays the 2 detailcolumns in a grid. Could this be done using the RadGrid features ? All examples I saw, are displaying the nested grid below the master record.

Does anybody have an idea how to solve this task ?
Robert

[Iana Tsolova]

Hi Robert,

You can achieve your goal either using NestedViewTemplate or DetailTables. However what you should note is that all the data for the columns displayed in the master records should be included in the grid datasource. So you main need to join the master data table with the first row of the detail data table into one table. From than on, you can bind the detail tables to the left records in the detail table. To hide the expand/collapse images for the item which should not display any further details, you might follow the solution provided here.

However, if you what the records in the detail columns to be sorted as if they belong to a single GridTableView, you might need to implement custom sorting.

Kind regards,
Iana
the Telerik team

[Robert]

Hi Iana,

thank you for your reply. Your approach sounds quite interesting. But I wonder if it is possible to style the detail table as if it would be a further row with only the master data left empty. But I will give it a try.

Please could you tell me, if it is possible to display a html-table within a grid column. Perhaps this could be another possiblity to achieve my goal.

Kind regards
Robert

[Veli]

Hello Robert,

You can style the detail table as though it is part of the parent table. You need to remove the first cell of the nested item in which the detail table is rendered. This will have the detail table stretch the the width of the parent table.

If you are using alternating item styles, you can also modify the CSS classes of your rows, so that both parent and nested items are alternating in one sequence. To do that, you can keep an external index of the items created in the grid and alternate the "rgRow" / "rgAltRow" CSS classes based on even / odd index values.

Sample test page demonstrating this approach is attached.

You can certainly display any HTML in your grid columns. Simply use a GridTemplateColumn to define a custom template for your column cells.

Best wishes,
Veli
the Telerik team

[Dave]

Robert,

I am wondering if you were able to implement this and how you went about it. I am also trying to configure a RadGrid so that it displays my parent/child data in the following manner:

MasterColumn1, MasterCol2, MasterCol3, DetailCol1,DetailCol2   (first detaildata record)
                                                                   DetailCol1,DetailCol2   (second detaildata record)
MasterColumn1, MasterCol2, MasterCol3, DetailCol1,DetailCol2   (first detaildata record)
                                                                   DetailCol1,DetailCol2   (second detaildata record)
                                                                   DetailCol1,DetailCol2   (third detaildata record)
MasterColumn1, MasterCol2, MasterCol3, DetailCol1,DetailCol2   (first and only detaildata record)

I tried to follow the sample that Telerik included, but it did not display properly.

Any help you can provide would be greatly appreciated.

[Veli]

Hi Dave,

The idea is to have all the detail tables databind at once, have all the parent items expanded by default, so that all data is visible. Then you remove the ExpandCollpaseColumn, so that users cannot collapse the parent items. Finally, if you use alternating item style and want all your items in all levels to alternate together, you keep an external index of the created data items and set the item style / alternating item style accordingly.

This is all demonstrated in the sample project I attached in my previous comment. Can you tell us what exactly is not working in your particular scenario?

Kind regards,
Veli
the Telerik team

[Robert]

Hi Dave,

using the information Veli from the telerik support provided (thank you for it, Veli)  I was able to implement the desired behaviour. But be warned, the solution is extremly slow, because for every detailrow there is a roundtrip to the db to get the data. You can perhaps speed it up if you load the masterdata and ALL of the detaildata in a dataset and configure a datarelation between the two datasets. I decided for myself not to use the radgrid but to create my grid dynamically in codebehind. I couldn´t managing the grouping functionality of the radgrid but in return have full control about my styling (footers, headers ...). The performance is really good (about 2000 master records together with about 3000 detail records in almost 5 secs.

Here is the solution for the radgrid:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDS_Master" GridLines="None"
    OnColumnCreated="RadGrid1_ColumnCreated"
    OnItemCreated="RadGri1_ItemCreated"
    OnDetailTableDataBind="RadGrid1_DetailTableDataBind">

    <MasterTableView TableLayout="Fixed" HierarchyLoadMode="Client" HierarchyDefaultExpanded="true" DataSourceID="SqlDS_Master" DataKeyNames="MasterOID" AutoGenerateColumns="false" Width="850px">
            <Columns>
               <telerik:GridBoundColumn HeaderText="M.-OID" DataField="MasterOID" DataType="System.Int32" ReadOnly="True" SortExpression="MasterOID" UniqueName="MasterOID">
                    <HeaderStyle Width="50px" />
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn HeaderText="MasterCol1" DataField="MasterCol1" SortExpression="MasterCol1" UniqueName="MasterCol1">
                    <HeaderStyle Width="150px" />
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn HeaderText="MasterCol2" DataField="MasterCol2" SortExpression="MasterCol2" UniqueName="MasterCol2">
                    <HeaderStyle Width="100px" />
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn HeaderText="MasterCol3" DataField="MasterCol3" SortExpression="MasterCol3" UniqueName="MasterCol3">
                    <HeaderStyle Width="100px" />
               </telerik:GridBoundColumn>

               <telerik:GridBoundColumn HeaderText="D.-OID" DataField="DetailOID" DataType="System.Int32" SortExpression="DetailOID" UniqueName="DetailOID">
                    <HeaderStyle Width="50px" />
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn HeaderText="DetailCol1" DataField="DetailCol1" SortExpression="DetailCol1" UniqueName="DetailCol1">
                    <HeaderStyle Width="200px" />
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn HeaderText="DetailCol2" DataField="DetailCol2" UniqueName="DetailCol2">
                    <HeaderStyle Width="100px" />
               </telerik:GridBoundColumn>
               <telerik:GridBoundColumn HeaderText="DetailCol3" DataField="DetailCol3" UniqueName="DetailCol3">
                    <HeaderStyle Width="100px" />
               </telerik:GridBoundColumn>
            </Columns>

        <DetailTables>
            <telerik:GridTableView  Width="850px" GridLines="Vertical" DataKeyNames="MasterOID" AutoGenerateColumns="false" TableLayout="Fixed">
                <Columns>
                    <telerik:GridTemplateColumn><HeaderStyle Width="50px" /></telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn><HeaderStyle Width="150px" /></telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn><HeaderStyle Width="100px" /></telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn><HeaderStyle Width="100px" /></telerik:GridTemplateColumn>
                   <telerik:GridBoundColumn HeaderText="Detail-OID" DataField="DetailOID" DataType="System.Int32" SortExpression="DetailOID" UniqueName="DetailOID">
                        <HeaderStyle Width="50px" />
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn HeaderText="DetailCol1" DataField="DetailCol1" SortExpression="DetailCol1" UniqueName="DetailCol1">
                        <HeaderStyle Width="200px" />
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn HeaderText="DetailCol2" DataField="DetailCol2" UniqueName="DetailCol2">
                        <HeaderStyle Width="100px" />
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn HeaderText="DetailCol3" DataField="DetailCol3" UniqueName="DetailCol3">
                        <HeaderStyle Width="100px" />
                   </telerik:GridBoundColumn>
                </Columns>
            </telerik:GridTableView>
        </DetailTables>
    </MasterTableView>
</telerik:RadGrid>

The code behind is:

Protected Sub RadGrid1_ColumnCreated(ByVal sender As Object, ByVal e As GridColumnCreatedEventArgs)
        If (TypeOf e.Column Is GridExpandColumn) Then
            e.Column.Visible = False
        End If
    End Sub

    Protected Sub RadGrid1_DetailTableDataBind(ByVal sender As Object, ByVal e As GridDetailTableDataBindEventArgs)
        Dim MasterOID As Integer = CInt(e.DetailTableView.ParentItem.GetDataKeyValue("MasterOID"))
        Dim myTA As DS_TestTableAdapters.TA_TableActivitiesSubRows = New DS_TestTableAdapters.TA_TableActivitiesSubRows
        e.DetailTableView.DataSource = myTA.GetData(MasterOID)
end sub


    Protected Sub RadGri1_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs)
        If TypeOf e.Item Is GridHeaderItem And Not (e.Item.OwnerTableView Is RadGrid1.MasterTableView) Then
            e.Item.Style("display") = "none"
        End If

        If e.Item.OwnerTableView Is RadGrid1.MasterTableView Then
            e.Item.Cells(0).Visible = False
        End If

        If TypeOf e.Item Is GridNoRecordsItem Then
            e.Item.OwnerTableView.ParentItem.ChildItem.Style("display") = "none"
        End If

        'If TypeOf e.Item Is GridDataItem Then
        '    e.Item.CssClass = If(itemIndex Mod 2 = 0, "rgRow", "rgAltRow")
        '    itemIndex += 1
        'End If
    End Sub

Hope this helps

Robert

[Veli]

Hi,

Yes, Robert, that is the idea generally. Also, to add, as you are showing all grid items in all nested levels together, binding detail tables on-demand does not really add to performance in this particular scenario. Therefore, in this case, effort should be made toward minimizing the SQL - to - web app round trips when fetching data for the grid. Ideally, you would want to fetch all data (both for the master and detail tables) in a single or, at most 2, SELECT queries per databinding request from RadGrid. This means you can use a DataSet (or a custom data collection) to hold your data, where each detail table will bind to a portion of the data when needed in the DetailTableDataBind event. Thus, even though each detail table will request its own data separately, you will all have all the data brought in at once.

Good luck,
Veli
the Telerik team