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

Multiple Header Rows

2 Answers 228 Views

Grid

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

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

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())

'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

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

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 = " ", 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 = " ", 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 = " ", 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 = " ", 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 = " ", 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);


        }

    }