[Solved] Help with Grouping

[Kurt Kluth]

Have an existing page that was using Classic ASP (OldLayout.jpg) and I am trying to do a similar approach using a RadGrid with Grouping (NewLayout.jpg).  As I do realize that there will be differences and I would like to have things look similar. 

Is there anyway of adding a "Master Header" to the grid? "Policyholder Board Reporting", currently it is just a Header for a field.

There will 2 main categories that it can be broken down by ASI or ESI.  Is there anyway of only displaying them once, when it changes?  So it would read "ASI" then records and "ESI" then records.  Currently it reads "ASI" then Date

How can I get my Dates formatted to in Long Date Time format.  <Day of week> Month Day, Year

Below is the code I am trying to implement and hopefully it will help answer my questions.  Also I would like to delete but need to get the ID which is apart of the grid and was trying to get that via the RadGrid_ItemDeleted. 

<telerik:RadGrid ID="_grdExisting" runat="server"

AutoGenerateColumns="False" CellSpacing="0" 

GridLines="None">

 

<HeaderStyle ForeColor="White" BackColor="Black" HorizontalAlign="Center" />

<MultiHeaderItemStyle BackColor="Green" ForeColor="Yellow" />

<MasterTableView DataKeyNames="BoardReportID">

 

<GroupByExpressions>

    <telerik:GridGroupByExpression>

        <SelectFields>

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

        </SelectFields>

        <SelectFields>

            <telerik:GridGroupByField FieldName="BoardReportDate"  FormatString="{0:D}"></telerik:GridGroupByField>

        </SelectFields>

        <GroupByFields>

            <telerik:GridGroupByField FieldName="ASI_ESI" SortOrder="Ascending"></telerik:GridGroupByField>

        </GroupByFields>

        <GroupByFields>

            <telerik:GridGroupByField FieldName="BoardReportDate" SortOrder="Descending" FormatString="{0:D}"></telerik:GridGroupByField>

        </GroupByFields>

    </telerik:GridGroupByExpression>

</GroupByExpressions>  

<GroupHeaderTemplate>

        <asp:Label runat="server" ID="Label2" Text='<%# DirectCast(Container, GridGroupHeaderItem).AggregatesValues("ASI_ESI") & "SI" %>'

            Visible='<%# ((DirectCast(Container, GridGroupHeaderItem).AggregatesValues("ASI_ESI")) IsNot Nothing)%>'>

        </asp:Label>

        <asp:Label runat="server" ID="Label1" Text='<%# DirectCast(Container, GridGroupHeaderItem).AggregatesValues("BoardReportDate") %>'

            Visible='<%# ((DirectCast(Container, GridGroupHeaderItem).AggregatesValues("BoardReportDate")) IsNot Nothing)%>'>

        </asp:Label>

</GroupHeaderTemplate>

<Columns>

    <telerik:GridHyperLinkColumn DataTextField="BoardReportDesc"

            ItemStyle-HorizontalAlign="Left" UniqueName="NonComplianceCount"

            HeaderStyle-Font-Bold="false" HeaderStyle-Wrap="false"

            DataNavigateUrlFields="ReportLocation"

            DataNavigateUrlFormatString="Reports/{0}"

            HeaderStyle-Width="150px" HeaderText="Policyholder Board Reporting" >

            <ItemStyle Wrap="True" Font-Underline="true"/>

    </telerik:GridHyperLinkColumn>

    <telerik:GridButtonColumn ConfirmText="Delete this product?" ButtonType="ImageButton"

            CommandName="Delete" Text="Delete" UniqueName="DeleteColumn1">

            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton"></ItemStyle>

    </telerik:GridButtonColumn>

</Columns>

</MasterTableView>

 

</telerik:RadGrid>


[Angel Petrov]

Hi Kurt,

Creating a master header is achievable by taking advantage of the multi-column headers functionality which is demonstrated here. Making the BoardReportDate field a sub group however would require changing the GroupByExpressions collection like demonstrated below:

<groupbyexpressions>
            <telerik:GridGroupByExpression>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="ASI_ESI" FormatString="{0}"></telerik:GridGroupByField>
                </SelectFields>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="ASI_ESI" SortOrder="Ascending"></telerik:GridGroupByField>
                </GroupByFields>
            </telerik:GridGroupByExpression>
              <telerik:GridGroupByExpression>
                   <GroupByFields>
                            <telerik:GridGroupByField FieldName="BoardReportDate" SortOrder="Descending" FormatString="{0:D}"></telerik:GridGroupByField>
                    </GroupByFields>
                   <SelectFields>
                        <telerik:GridGroupByField FieldName="BoardReportDate"  FormatString="{0:D}"></telerik:GridGroupByField>
                    </SelectFields>
             </telerik:GridGroupByExpression>
</groupbyexpressions>

For formatting the date in the described format you can use this FormatString:

FormatString="{0:dd/MM/yyyy}"

And last but not least comes the  ID issue. In order to resolve it I would recommend setting a DataKeyName(like you have already done) and extracting the needed value in to OnDeleteCommand or OnItemCommand events using the GetDataKeyValue method.

Regards,
Angel Petrov
Telerik

[Kurt Kluth]

Angel,

Your reply helped quite a bit as my page is coming together.  Is there anyway of turning off the Collapse and Expand buttons?  Also would it be possible to change the color of the grouping color area (where the collapse and expand buttons are)?

I realize that it may not be able to do it but figured I could ask.  It breaks exactly like I want it but is there anyway of formatting the first group differently than the second grouping?

The dates don't seem to be formatted correctly either.  As you can see I have formatted it correctly but believe the problem to be with the DirectCast (Label). 

<telerik:GridGroupByExpression>
    <SelectFields>
        <telerik:GridGroupByField FieldName="BoardReportDate"  FormatString="{0:dd/MM/YYYY}"></telerik:GridGroupByField>
    </SelectFields>

    <GroupByFields>
        <telerik:GridGroupByField FieldName="BoardReportDate" SortOrder="Descending" FormatString="{0:dd/MM/YYYY}"></telerik:GridGroupByField>
    </GroupByFields>
</telerik:GridGroupByExpression>

    <asp:Label runat="server" ID="Label1" Text='<%# DirectCast(Container, GridGroupHeaderItem).AggregatesValues("BoardReportDate") %>'
        Visible='<%# ((DirectCast(Container, GridGroupHeaderItem).AggregatesValues("BoardReportDate")) IsNot Nothing)%>'>
    </asp:Label>

[Angel Petrov]

Hi Kurt,

For disabling the expand/collapse buttons I would recommend hiding them using CSS. Additionally if you want the buttons to be visible you can set the GroupLoadMode to Client and cancel the OnGroupExpanding or OnGroupCollapsing events according to some criteria.

Second comes the changing of the col group colors which be accomplished with the help of CSS. For example:

.rgGroupCol .rgCollapse
       {
           background-color:red !important;
       }
       .rgGroupCol .rgExpand
       {
           background-color:green !important;
       }

Styling the groups differently however would be tricky. For that purpose JavaScript should be used. The idea is to traverse the HTML tr elements and apply styling only to the desired cells.

As for the formatting issue I have to say that the behavior experienced is expected. When templates are used the developer should handle the formatting manually.

Regards,
Angel Petrov
Telerik