[Solved] How to create Multiple groups using GroupHeaderTemplate

[Rafael]

Hi Telerik's team,

I am trying build a radgrid where data should to be grouped in two levels. How can I do this using GroupHeaderTemplate ?
Below is my radgrid. It is grouped by code Primary Key from data. But I need to group then inside a parent group setting header group like a template.

Yet, I just  grouped by ID. How can I group by ParentGroupId too?

<telerik:RadGrid ID="radgrid" runat="server" AutoGenerateColumns="false"
Skin="Silk" Width="90%" Visible="false" AllowMultiRowSelection="true"
AllowSorting="true" AllowPaging="true" ShowStatusBar="true" EnableLinqExpressions="false"
OnItemDataBound="radgrid_ItemDataBound" OnDataBound="radgrid_DataBound"

        CellSpacing="0" GridLines="None" OnPageIndexChanged="radgrid_PageIndexChanged" >

            
<ClientSettings AllowDragToGroup="true" EnableRowHoverStyle="true" AllowColumnsReorder="true"
           Selecting-AllowRowSelect="true" ClientEvents-OnRowDeselected="UnCheckGroup"

  ReorderColumnsOnClient="true" ColumnsReorderMethod="Reorder">

       <Animation AllowColumnReorderAnimation="true" AllowColumnRevertAnimation="true"></Animation>
    </ClientSettings>
    <MasterTableView DataSourceID="ods" DataKeyNames="ID" GroupLoadMode="Client"
             GroupsDefaultExpanded="false" GroupHeaderItemStyle-HorizontalAlign="Left">

            <GroupHeaderTemplate>

          <asp:Label runat="server" ID="Label1" ForeColor="#2F4F4F" Text="Id: "></asp:Label>

          <asp:Label runat="server"
                ID="Label3" Text='<%# (((GridGroupHeaderItem)Container).AggregatesValues["ID"]) %>'></asp:Label>

                       <asp:Label runat="server" ID="Label2" ForeColor="#2F4F4F" Text="Date: "></asp:Label>

           <asp:Label runat="server"  
        ID="Label6" Text='<%# (((GridGroupHeaderItem)Container).AggregatesValues["Date"]) %>'></asp:Label>

           <asp:Label runat="server" ID="Label7" ForeColor="#2F4F4F" Text="Price: $"></asp:Label>

           <asp:Label runat="server"
        ID="Label8" Text='<%# (((GridGroupHeaderItem)Container).AggregatesValues["Price"]) %>'></asp:Label>

       </GroupHeaderTemplate>

       <Columns>

           <telerik:GridBoundColumn DataField="ProductName" UniqueName="ProductName"
HeaderText="Product">

                 <HeaderStyle HorizontalAlign="Center" />

                 <HeaderStyle HorizontalAlign="Center" />

            </telerik:GridBoundColumn>

            <telerik:GridBoundColumn DataField="Amount" UniqueName="Amount" HeaderText="Amount">

                        <HeaderStyle HorizontalAlign="Center" />

                        <HeaderStyle HorizontalAlign="Center" />

            </telerik:GridBoundColumn>

       </Columns>

       <GroupByExpressions>

             <telerik:GridGroupByExpression>

                   <GroupByFields>

                         <telerik:GridGroupByField FieldName="ParentGroupID"/>

                    </GroupByFields>

            </GroupByExpressions>

            <telerik:GridGroupByExpression>

                    <SelectFields>

                         <telerik:GridGroupByField FieldName="ID"/>

                    </SelectFields>

                    <SelectFields>

                         <telerik:GridGroupByField FieldName="Date"/>

                    </SelectFields>

                    <SelectFields>

                         <telerik:GridGroupByField FieldName="Price"  FormatString="{0:C}"/>

                    </SelectFields>

                    <GroupByFields>

                         <telerik:GridGroupByField FieldName="ID"/>

                    </GroupByFields>

            </telerik:GridGroupByExpression>

        </GroupByExpressions>
         </MasterTableView>
   </telerik:RadGrid>
<asp:ObjectDataSource ID="ods" runat="server" SelectMethod="ListItems"

                            TypeName="...my namespace ..."></asp:ObjectDataSource>

[Princy]

Hi Rafael,

I guess you wanted a nested grouping for that you need to add two different GridGroupByExpressions as follows:

ASPX:

<GroupByExpressions>
    <telerik:GridGroupByExpression>
    <SelectFields>
        <telerik:GridGroupByField FieldAlias="ParentGroupID" FieldName="ParentGroupID"></telerik:GridGroupByField>
    </SelectFields>
    <GroupByFields>
        <telerik:GridGroupByField FieldName="ParentGroupID"></telerik:GridGroupByField>
    </GroupByFields>
</telerik:GridGroupByExpression>
<telerik:GridGroupByExpression>
    <SelectFields>
        <telerik:GridGroupByField FieldAlias="ID" FieldName="ID"></telerik:GridGroupByField>
    </SelectFields>
    <GroupByFields>
        <telerik:GridGroupByField  FieldName="ID"></telerik:GridGroupByField>
    </GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>

But please note that the grid supports only a single GroupHeader/Footer Template that would be applied on all levels.
Since the template comprises lots of items it does not hold value of a single field. In the header/footer templates you only have access to the aggregated values (through the AggregateValues collection) in case you have defined aggregates in the grouping.
More information can be found in the following help topic:
http://www.telerik.com/help/aspnet-ajax/grid-group-header-footer-templates.html

Thanks,
Princy

[Rafael]

Thanks

I created the customized header group with all informations that I need and I set visibility according the group to be displayed.

[George]

Hi Rafael and Telerik team,

Rafael, where did you evaluate visibility for the groupheadertemplate (was in the code behind, or in the aspx)?

Also, what criteria did you use to evaluate whether the header was for the first group, or the second group?

If someone from Telerik wants to jump in here as well, I would appreciate it.

Thanks.

[Kostadin]

Hi George,

In order to use a header template you have to either declare it in the mark up by specifying GroupHeaderTemplate or add the group header programmatically on Page_init event handler. Note that by specifying a template it will shows inside each group's header row. Nevertheless you could modify the data of the controls for the different group levels by hooking OnItemDataBound event handler and check whether the currently bound control is GridGroupHeaderItem. Then you could distinguish each group level by its GroupIndex. For instance the first group level will have indexes as the following ones - "0,1,2 etc.", the second level indexes will be "0_0, 1_0, 2_0 etc" etc. So basically you could split the GroupIndex by the underscore and check for the length of the array. Please check out the following code snippet.

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
    if(e.Item is GridGroupHeaderItem)
    {
        GridGroupHeaderItem groupHeader = e.Item as GridGroupHeaderItem;
        int level = groupHeader.GroupIndex.Split('_').Length;
        if(level == 1)
        {
            //This GridGroupHeaderItem is from the first level
        }
        else if(level == 2)
        {
            //This GridGroupHeaderItem is from the second level
        }
    }
}

Additionally I would recommend you to examine the help article which Princy provides in his reply.

Regards,
Kostadin
Telerik

 

 

[George]

Thanks Kostadin.

I'll give that a whirl.

[Rafael]

Hi George

Like I sad, I used the visible property to display the controls for each group. Below is the idea to do this:

<GroupHeaderTemplate>
          <asp:Label runat="server" ID="LabelParentGroup" ForeColor="#2F4F4F"
                  Visible='<%# !string.IsNullOrEmpy(AggregateValues["ParentID"]) %>'>
          </asp:Label>
          <asp:Label runat="server" ID="LabelGroup" ForeColor="#2F4F4F"
                  Visible='<%# string.IsNullOrEmpy(AggregateValues["ParentID"]) %>'>
          </asp:Label>
 </GroupHeaderTemplate>

In bind time, the properties from data that represents the parent group are differents. So, It's possible differentiate the groups.

Any question, ask!

If I am not clear, when I  have access to files where I applied this idea, I will post here!