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