Two column header rows possible?

[Bill Musgrave]

We are currently creating output displaying 'Total' and 'Avg' information.
Is it possible to add a row above, spanning multiple columns similar to
this?:

| Widgets |
+----------------+
| Total | Avg |

Thanks
Bill

 

[Eliyahu Goldin]

It is not supported directly, but I can think of faking it by inserting
another data row with subheaders into the data table. You can format in a
special way making it look differently from data items. You can use
PreRender event for formatting.

Eliyahu

 

[Bill Musgrave]

Thanks Eiliyahu, though I am not sure I understand.

When you said data row, did you mean add another datagridcontrol? If so how
do we get all the columns to align?

If not, maybe you can elaborate (any code would be helpful).

Also, would there be a way to do this utilizing the templatecolumn?

Thanks again.
Bill

 

[Ken Cox [Microsoft MVP]]

Hi Bill,

Below, I've pasted in some code that should help you create headers that
span. It is a little finicky but can be done. See the code comments for
details.

Let us know if this helps?

Ken
Microsoft MVP [ASP.NET]
Toronto


<aspataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False"
ShowHeader="False">
<Columns>
<asp:BoundColumn DataField="Subject"></asp:BoundColumn>
<asp:BoundColumn DataField="Day"></asp:BoundColumn>
</Columns>
</aspataGrid>


Dim dt As DataTable
Private Sub Page_Load _
(ByVal sender As System.Object, _
ByVal e As System.EventArgs) _
Handles MyBase.Load
DataGrid1.ShowHeader = True
DataGrid1.DataSource = CreateDataSource()
DataGrid1.DataBind()
End Sub
Private Sub DataGrid1_ItemDataBound _
(ByVal sender As Object, _
ByVal e As _
System.Web.UI.WebControls.DataGridItemEventArgs) _
Handles DataGrid1.ItemDataBound
' Add a second header with a flag button in it
' by Ken Cox Microsoft MVP [ASP.NET]
If e.Item.ItemType = ListItemType.Header Then
' Get the collection of cells from the grid
Dim tcells As TableCellCollection
' Create an imagebutton
Dim imgBtn As New ImageButton
' Assign the URL
imgBtn.ImageUrl = "http://www.gc.ca/images/flag.gif"
' Get the collection of existing cells so we can get a count
tcells = e.Item.Cells
' Create a new cell
Dim fcell As New TableCell
' Add the image button to the new table cell
fcell.Controls.Add(imgBtn)
' Span the cell to however many columns there are
fcell.ColumnSpan = tcells.Count
' Create a new header object
Dim dgItemHeader As New DataGridItem _
(0, 0, ListItemType.Header)
' Add the cell to the header
dgItemHeader.Cells.Add(fcell)
dgItemHeader.Visible = True
' Add the header to the datagrid
DataGrid1.Controls(0).Controls.Add(dgItemHeader)
End If
End Sub
Function CreateDataSource() As ICollection
' Create sample data for the DataList control.
dt = New DataTable
Dim dr As DataRow

' Define the columns of the table.
dt.Columns.Add(New DataColumn("Student", GetType(String)))
dt.Columns.Add(New DataColumn("Subject", GetType(String)))
dt.Columns.Add(New DataColumn("Day", GetType(String)))

' Populate the table with sample values.
dr = dt.NewRow
dr(0) = "Ben"
dr(1) = "English"
dr(2) = "Thursday"
dt.Rows.Add(dr)
dr = dt.NewRow
dr(0) = "Ben"
dr(1) = "Geology"
dr(2) = "Monday"
dt.Rows.Add(dr)
dr = dt.NewRow
dr(0) = "Ben"
dr(1) = "Physics"
dr(2) = "Tuesday"
dt.Rows.Add(dr)
Dim dv As DataView = New DataView(dt)
Return dv
End Function

 

[Eliyahu Goldin]

Bill,

I mean adding another data row to the data table. When you bind the grid to
the table, the row should be rendered straight after the header.

Yes, template columns can be used. You can prepare HTML in ItemTemplate for
both subheader and normal data and, in ItemDataBound event, check on the
very first data row. If an item is the very first data row, populate HTML
for subheaders.

Eliyahu

 

[Bill Musgrave]

Ken thanks for your response, it helped tons.

Merry Christmas
Bill

Hi Bill,

Below, I've pasted in some code that should help you create headers that
span. It is a little finicky but can be done. See the code comments for
details.

Let us know if this helps?

Ken
Microsoft MVP [ASP.NET]
Toronto


<aspataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False"
ShowHeader="False">
<Columns>
<asp:BoundColumn DataField="Subject"></asp:BoundColumn>
<asp:BoundColumn DataField="Day"></asp:BoundColumn>
</Columns>
</aspataGrid>


Dim dt As DataTable
Private Sub Page_Load _
(ByVal sender As System.Object, _
ByVal e As System.EventArgs) _
Handles MyBase.Load
DataGrid1.ShowHeader = True
DataGrid1.DataSource = CreateDataSource()
DataGrid1.DataBind()
End Sub
Private Sub DataGrid1_ItemDataBound _
(ByVal sender As Object, _
ByVal e As _
System.Web.UI.WebControls.DataGridItemEventArgs) _
Handles DataGrid1.ItemDataBound
' Add a second header with a flag button in it
' by Ken Cox Microsoft MVP [ASP.NET]
If e.Item.ItemType = ListItemType.Header Then
' Get the collection of cells from the grid
Dim tcells As TableCellCollection
' Create an imagebutton
Dim imgBtn As New ImageButton
' Assign the URL
imgBtn.ImageUrl = "http://www.gc.ca/images/flag.gif"
' Get the collection of existing cells so we can get a count
tcells = e.Item.Cells
' Create a new cell
Dim fcell As New TableCell
' Add the image button to the new table cell
fcell.Controls.Add(imgBtn)
' Span the cell to however many columns there are
fcell.ColumnSpan = tcells.Count
' Create a new header object
Dim dgItemHeader As New DataGridItem _
(0, 0, ListItemType.Header)
' Add the cell to the header
dgItemHeader.Cells.Add(fcell)
dgItemHeader.Visible = True
' Add the header to the datagrid
DataGrid1.Controls(0).Controls.Add(dgItemHeader)
End If
End Sub
Function CreateDataSource() As ICollection
' Create sample data for the DataList control.
dt = New DataTable
Dim dr As DataRow

' Define the columns of the table.
dt.Columns.Add(New DataColumn("Student", GetType(String)))
dt.Columns.Add(New DataColumn("Subject", GetType(String)))
dt.Columns.Add(New DataColumn("Day", GetType(String)))

' Populate the table with sample values.
dr = dt.NewRow
dr(0) = "Ben"
dr(1) = "English"
dr(2) = "Thursday"
dt.Rows.Add(dr)
dr = dt.NewRow
dr(0) = "Ben"
dr(1) = "Geology"
dr(2) = "Monday"
dt.Rows.Add(dr)
dr = dt.NewRow
dr(0) = "Ben"
dr(1) = "Physics"
dr(2) = "Tuesday"
dt.Rows.Add(dr)
Dim dv As DataView = New DataView(dt)
Return dv
End Function

We are currently creating output displaying 'Total' and 'Avg' information.
Is it possible to add a row above, spanning multiple columns similar to
this?:

| Widgets |
+----------------+
| Total | Avg |

Thanks
Bill

 

[Bill Musgrave]

Eilyahu

Thanks for your time, we were finally able to get things working.

Merry Christmas
Bill