This is a migrated thread and some comments may be shown as answers.

Merging column headers dynamically

1 Answer 74 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AdGooroo
Top achievements
Rank 1
AdGooroo asked on 12 Jun 2009, 08:20 PM
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?

1 Answer, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 15 Jun 2009, 05:09 AM
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
Tags
Grid
Asked by
AdGooroo
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Share this question
or