Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Multiple Header Rows

2 Answers 134 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
Rob asked on 14 Sep 2011, 09:29 PM
HeaderRows.JPG
In a nutshell, I need to add an additional row to the grid's header so that I can visibly group columns together.  After reading the following thread, Adding Multiple Header Rows at Runtime in RadGrid , I was successfully able to make this happen, but ran into a sizing issue.  I realize that this situation is not supported but was hoping somebody will be able to help me out. 

Simply put, when setting the colspan property of the new GridTableHeaderCell, the width of the columns shrink and I want them to stay fixed.  Attached is a before & after pic.  The before is by commenting out the dgHeader_PreRender event.  The after has the same event uncommented.  The width of dgHeader needs to equal the width of dgDetail, columns widths especially.

Please run the code with event dgHeader_PreRender commented out first to see what the column widths should always look like.

Here is my code:

ASPX

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="mgrJS" >
        </telerik:RadScriptManager>
    <div>
    <table>
        <tr>
            <td align="left" valign="top">
                <telerik:RadGrid runat="server" ID="dgHeader" Skin="Web20" AllowSorting="true" >
                    <ClientSettings>
                        <Scrolling UseStaticHeaders="True" />
                    </ClientSettings>
                     <MasterTableView BorderWidth="1px" GridLines="Both" style="border-collapse: collapse !Important;" Font-Bold="false" TableLayout="Fixed" AutoGenerateColumns="false" ShowHeader="True">
                        <Columns>
                            <telerik:GridBoundColumn DataField="N1" HeaderText="N 1" UniqueName="N1">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="N2" HeaderText="N 2" UniqueName="N2">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="N3" HeaderText="N 3" UniqueName="N3">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="C1" HeaderText="C 1" UniqueName="C1">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="C2" HeaderText="C 2" UniqueName="C2">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="C3" HeaderText="C 3" UniqueName="C3">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </td>
        </tr>
        <tr>
            <td align="left" valign="top">
                <telerik:RadGrid runat="server" ID="dgDetail" Skin="Web20" AllowSorting="true">
                    <ClientSettings>
                        <Scrolling UseStaticHeaders="True" />
                    </ClientSettings>
                     <MasterTableView BorderWidth="1px" GridLines="Both" style="border-collapse: collapse !Important;" Font-Bold="false" TableLayout="Fixed" AutoGenerateColumns="false" ShowHeader="False">
                        <Columns>
                            <telerik:GridBoundColumn DataField="N1" HeaderText="N 1" UniqueName="N1">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="N2" HeaderText="N 2" UniqueName="N2">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="N3" HeaderText="N 3" UniqueName="N3">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="C1" HeaderText="C 1" UniqueName="C1">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="C2" HeaderText="C 2" UniqueName="C2">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="C3" HeaderText="C 3" UniqueName="C3">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
            </td>
        </tr>
    </table>
    </div>
    </form>
</body>
</html>

 

VB

 

Partial Class Default3
  
    Inherits System.Web.UI.Page
  
    Private Sub dg_Init(ByRef dg As RadGrid, ByVal isHeader As Boolean)
        With dg
            If isHeader Then
                For Each col As GridBoundColumn In dg.MasterTableView.Columns
                    'Need to set width's to 54 in order to line up with dtDetail's columns below
                    col.HeaderStyle.Width = 54
                    col.ItemStyle.Width = 54
                    col.ItemStyle.HorizontalAlign = HorizontalAlign.Right
                Next
            Else
                For Each col As GridBoundColumn In dg.MasterTableView.Columns
                    col.HeaderStyle.Width = 60
                    col.ItemStyle.Width = 60
                    col.ItemStyle.HorizontalAlign = HorizontalAlign.Right
                Next
            End If
        End With
    End Sub
  
    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
        dg_Init(dgHeader, True)
        dg_Init(dgDetail, False)
    End Sub
  
    Protected Sub dgHeader_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles dgHeader.NeedDataSource
        dgHeader.DataSource = GetHeaderDatasource()
    End Sub
  
    Protected Sub dgDetail_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles dgDetail.NeedDataSource
        dgDetail.DataSource = GetDetailDatasource()
    End Sub
  
    Protected Sub dgHeader_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dgHeader.PreRender
        Dim header As GridHeaderItem = DirectCast(dgHeader.MasterTableView.GetItems(GridItemType.Header)(0), GridHeaderItem)
        Dim head As GridTHead = DirectCast(header.Parent, GridTHead)
  
        'create a new GridHeaderItem which will be the new row  
        Dim newHeaderItem As New GridHeaderItem(dgHeader.MasterTableView, 0, 0)
  
        'add 2 empty table header cells, as there are 2 hidden columns always created in RadGrid
        newHeaderItem.Cells.Add(New GridTableHeaderCell())
        newHeaderItem.Cells.Add(New GridTableHeaderCell())
  
        'Add as many header cells as you need with required colspans
        newHeaderItem.Cells.Add(New GridTableHeaderCell() With {.Text = "Numbers", .ColumnSpan = 3})
        newHeaderItem.Cells.Add(New GridTableHeaderCell() With {.Text = "Characters", .ColumnSpan = 3})
  
        head.Controls.AddAt(0, newHeaderItem)
    End Sub
  
    Private Function GetHeaderDatasource() As DataTable
        If Me.Session("dgHeader_DataSource") Is Nothing Then
            Dim dt As DataTable = CreateDataTable()
            Dim r As DataRow = dt.NewRow
            r.ItemArray = New Object() {"100", "200", "300", "X", "Y", "Z"}
            dt.Rows.Add(r)
            Session("dgHeader_DataSource") = dt
        End If
        Return Session("dgHeader_DataSource")
    End Function
  
    Private Function GetDetailDatasource() As DataTable
        If Me.Session("dgDetail_DataSource") Is Nothing Then
            Dim dt As DataTable = CreateDataTable()
            Dim r As DataRow = dt.NewRow
            r.ItemArray = New Object() {"50", "100", "150", "X", "Y", "Z"}
            dt.Rows.Add(r)
            r = dt.NewRow
            r.ItemArray = New Object() {"50", "100", "150", "X", "Y", "Z"}
            dt.Rows.Add(r)
            Session("dgDetail_DataSource") = dt
        End If
        Return Session("dgDetail_DataSource")
    End Function
  
    Private Function CreateDataTable() As DataTable
        Dim dt As New DataTable
        dt.Columns.Add("N1", GetType(String))
        dt.Columns.Add("N2", GetType(String))
        dt.Columns.Add("N3", GetType(String))
        dt.Columns.Add("C1", GetType(String))
        dt.Columns.Add("C2", GetType(String))
        dt.Columns.Add("C3", GetType(String))
        Return dt
    End Function
  
End Class

2 Answers, 1 is accepted

Sort by
0
Rob
Top achievements
Rank 1
answered on 15 Sep 2011, 02:36 PM
Here is my workaround to achieve what I'm looking for, but I don't like the approach.

Private Sub dg_Init(ByRef dg As RadGrid, ByVal isHeader As Boolean)
        With dg
            If isHeader Then
                For Each col As GridBoundColumn In dg.MasterTableView.Columns
                    'Need to set width's to 54 in order to line up with dtDetail's columns below
                    If col.UniqueName = "N1" Or col.UniqueName = "C1" Then
                        col.HeaderStyle.Width = 54
                        col.ItemStyle.Width = 54
                    Else
                        col.HeaderStyle.Width = 63
                        col.ItemStyle.Width = 63
                    End If
                    col.ItemStyle.HorizontalAlign = HorizontalAlign.Right
                Next
            Else
                For Each col As GridBoundColumn In dg.MasterTableView.Columns
                    col.HeaderStyle.Width = 60
                    col.ItemStyle.Width = 60
                    col.ItemStyle.HorizontalAlign = HorizontalAlign.Right
                Next
            End If
        End With
    End Sub
0
venkat
Top achievements
Rank 1
answered on 01 May 2014, 09:05 AM
protected void GridWSR_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item.ItemType == GridItemType.Header)
        {
            GridItem[] header = GridWSR.MasterTableView.GetItems(GridItemType.Header);

            GridTHead head = ((GridTHead)header[0].Parent.Controls[0].Parent);
            GridHeaderItem currentHeaderItem = (GridHeaderItem)head.Controls[0];
            head.Controls.Clear();
            //Top Header Item at Level 0

            GridHeaderItem itm = new GridHeaderItem(GridWSR.MasterTableView,0,0);
            itm.Cells.Add(new GridTableHeaderCell() { Text = " XYZ3", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = " XYZ1 ", BackColor = System.Drawing.Color.White });
            //itm.Cells.Add(new GridTableHeaderCell() {  Text = " XYZ " });
            itm.Cells.Add(new GridTableHeaderCell() { ColumnSpan = 5, RowSpan = 2, Text = "&nbsp;", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Actual Weekly Sales Avg.", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Weekly Variance Avg.", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { ColumnSpan = 3, RowSpan = 2, Text = "&nbsp;", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Weekly Target Variance %",BorderStyle=BorderStyle.Solid,BorderWidth=1, BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { ColumnSpan = 4, BorderStyle=BorderStyle.None, Text = "&nbsp;", BackColor = System.Drawing.Color.White });
            //Level 1 Header Item
            head.Controls.Add(itm);

            itm = new GridHeaderItem(GridWSR.MasterTableView, 0, 0);
            itm.Cells.Add(new GridTableHeaderCell() { Text = " XYZ3", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = " XYZ1 ", BackColor = System.Drawing.Color.White });
            //itm.Cells.Add(new GridTableHeaderCell() {  Text = " XYZ " });
            //itm.Cells.Add(new GridTableHeaderCell() { Text = "&nbsp;", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = AWS.ToString("C2"), BackColor = System.Drawing.Color.FromArgb(255,255,153) });
            itm.Cells.Add(new GridTableHeaderCell() { Text = AWV.ToString("C2"), BackColor = System.Drawing.Color.FromArgb(255,204,153) });
            //itm.Cells.Add(new GridTableHeaderCell() { Text = "&nbsp;", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = AWT.ToString("P2"), BackColor = System.Drawing.Color.FromArgb(51,51,51),ForeColor=System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { ColumnSpan = 4,Text = "Under Required Wkly Avg.",HorizontalAlign=HorizontalAlign.Center, BackColor = System.Drawing.Color.White });

            head.Controls.Add(itm);

            //Level 2 Header Item
            itm = new GridHeaderItem(GridWSR.MasterTableView, 0, 0);
            itm.Cells.Add(new GridTableHeaderCell() { Text = " XYZ3", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = " XYZ1 ", BackColor = System.Drawing.Color.White });
            //itm.Cells.Add(new GridTableHeaderCell() {  Text = " XYZ " });
            itm.Cells.Add(new GridTableHeaderCell() { ColumnSpan = 3, Text = "Week", BackColor = System.Drawing.Color.White });
                                                                                                                             //Green Color
            itm.Cells.Add(new GridTableHeaderCell() { Text = ddlDate.SelectedValue.ToString() + " Weekly Budget", BackColor = System.Drawing.Color.FromArgb(204, 255, 204) });
            itm.Cells.Add(new GridTableHeaderCell() { Text = ddlDate.SelectedValue.ToString() + " Annual Budget", BackColor = System.Drawing.Color.FromArgb(204, 255, 204) });

            itm.Cells.Add(new GridTableHeaderCell() { Text = ddlDate.SelectedValue.ToString()+" Actual", BackColor = System.Drawing.Color.FromArgb(255, 255, 153) });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Weekly Variance", BackColor = System.Drawing.Color.FromArgb(255, 204, 153) });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Cumulative Variance", BackColor = System.Drawing.Color.FromArgb(150, 150, 150) });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Weekly Average (Budgeted)", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Weekly Average(Actual) ", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Overall New Weekly 'Average' Required", BackColor = System.Drawing.Color.FromArgb(153, 204, 255) });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Week", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = ddlDate.SelectedValue.ToString() + " Budget after weekly sale", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "Projected Run Rate", BackColor = System.Drawing.Color.White });
            itm.Cells.Add(new GridTableHeaderCell() { Text = "YTD Projected Variance %", BackColor = System.Drawing.Color.White });

            head.Controls.Add(itm);

          
        }
        
    }
Tags
Grid
Asked by
Rob
Top achievements
Rank 1
Answers by
Rob
Top achievements
Rank 1
venkat
Top achievements
Rank 1
Share this question
or