Merging column headers dynamically

[AdGooroo]

Hi,

We've been using RadGrid for a few years now but have never been able to adequately solve a very basic problem: we'd like to merge several adjacent columns in such a way that preserves their sorting. This *must* be done dynamically at run-time (design time is not an option).

Ideally, the resulting table header should have a single merged cell above the individual columns with some descriptive text in it, while the individual columns (and sorting features) sit below it:

-------------------
| Group Name |
-------------------
|     |      |     |    |
-------------------

We can kind of get close to this by trapping the DataGrid_ItemCreated event, hiding all but the first column header, and then replacing its contents with a custom HTML table. This does not allow us to sort the columns however.

Is there some mechanism available by which we can group columns?

[Princy]

Hi,

If i have got it right I think  you need to check out the demo on "Multi-header columns/merged cells with template columns " . Here the cells are merged but still the sort is preserved for each column. You can create the html table and  dynamically add the Sort link buttons and set their Command arguments accordingly as shown below:

  <telerik:GridTemplateColumn UniqueName="TemplateColumn" SortExpression="CompanyName"
                        InitializeTemplatesFirst="false">
                        <HeaderTemplate>
                            <table id="Table1" cellspacing="0" style="width:240px;" class="myTable">
                                <tr>
                                    <td colspan="2" align="center">
                                        <b>Contact details</b></td>
                                </tr>
                                <tr>
                                    <td style="width: 50%">
<asp:LinkButton CssClass="Button" ID="btnContName" Text="Contact name" ToolTip="Sort by ContactName"
CommandName='Sort' CommandArgument='ContactName' runat="server" /></td>
                                    <td style="width: 50%">
<asp:LinkButton CssClass="Button" ID="btnContTitle" Text="Contact title" ToolTip="Sort by ContactTitle"
CommandName='Sort' CommandArgument='ContactTitle' runat="server" /></td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table cellspacing="0" width="100%" class="myTable">
                                <tr>
                                    <td style="width: 50%">
                                        <%# Eval("ContactName") %>
                                    </td>
                                    <td style="width: 50%">
                                        <%# Eval("ContactTitle") %>
                                    </td>
                                </tr>
                            </table>
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Center" />
                    </telerik:GridTemplateColumn>

For more info on this
http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/columntypes/defaultcs.aspx

Thanks,
Princy