datagrid - 2 header columns

M

Mortar

i need a datagrid with 2 header columns. The top one might have 1
column spanning 5 columns of the header row below it.

what is the best way to do this? Could i have 2 datatables...1 filling
the top row, and the 2nd header row would come from the 2nd datatable?
In this case, i guess i would have to add a row manually above the
header row (2nd dataset) which is the set of 1st data?

if someone has ideas, code explaining it would be very helpful.
 
K

Ken Cox [Microsoft MVP]

Here's a script that should get you going. Let us know?

Ken
Microsoft MVP [ASP.NET]

<%@ Page Language="VB" %>
<script runat="server">
Dim dt As Data.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
' Have the first column header span
' two columns
' by Ken Cox Microsoft MVP [ASP.NET]
If e.Item.ItemType = ListItemType.Header Then
' Declare variables
Dim dgItem As DataGridItem
Dim tcells As TableCellCollection
Dim fcell As TableCell
Dim scell As TableCell
' Get a reference to the header row item
dgItem = e.Item
' Get a reference to the cells in the
' header row item
tcells = e.Item.Cells
' Get a reference to the cell we want to
' span. In this case, the first cell
fcell = e.Item.Cells(0)
' Set the text of the span cell
fcell.Text = "This is the spanned cell"
' Set the columns to span to 2
fcell.ColumnSpan = 2
' Get a reference to the second cell
scell = e.Item.Cells(1)
' Remove the second cell because it will
' be replaced by the spanning column
dgItem.Cells.Remove(scell)
End If
End Sub
Function CreateDataSource() As ICollection
' Create sample data for the DataList control.
dt = New Data.DataTable
Dim dr As Data.DataRow


' Define the columns of the table.
dt.Columns.Add(New Data.DataColumn("Student", GetType(String)))
dt.Columns.Add(New Data.DataColumn("Subject", GetType(String)))
dt.Columns.Add(New Data.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 Data.DataView = New Data.DataView(dt)
Return dv
End Function

</script>

<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:datagrid ID="DataGrid1" runat="server">
</asp:datagrid>
</div>
</form>
</body>
</html>
 
M

Mortar

Thanks Ken for the code. Much appreciated and useful. I understand
what you are doing, but am contemplating using no header on the grid
at all.

I am thinking of using 3 unions in my query (the 1st two being the
header rows, the 3rd being the dataset), then just manually changing
the background color of the 1st two rows to make them look like header
rows. What do you think?


Here's a script that should get you going. Let us know?

Ken
Microsoft MVP [ASP.NET]

<%@ Page Language="VB" %>
<script runat="server">
Dim dt As Data.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
' Have the first column header span
' two columns
' by Ken Cox Microsoft MVP [ASP.NET]
If e.Item.ItemType = ListItemType.Header Then
' Declare variables
Dim dgItem As DataGridItem
Dim tcells As TableCellCollection
Dim fcell As TableCell
Dim scell As TableCell
' Get a reference to the header row item
dgItem = e.Item
' Get a reference to the cells in the
' header row item
tcells = e.Item.Cells
' Get a reference to the cell we want to
' span. In this case, the first cell
fcell = e.Item.Cells(0)
' Set the text of the span cell
fcell.Text = "This is the spanned cell"
' Set the columns to span to 2
fcell.ColumnSpan = 2
' Get a reference to the second cell
scell = e.Item.Cells(1)
' Remove the second cell because it will
' be replaced by the spanning column
dgItem.Cells.Remove(scell)
End If
End Sub
Function CreateDataSource() As ICollection
' Create sample data for the DataList control.
dt = New Data.DataTable
Dim dr As Data.DataRow


' Define the columns of the table.
dt.Columns.Add(New Data.DataColumn("Student", GetType(String)))
dt.Columns.Add(New Data.DataColumn("Subject", GetType(String)))
dt.Columns.Add(New Data.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 Data.DataView = New Data.DataView(dt)
Return dv
End Function

</script>

<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:datagrid ID="DataGrid1" runat="server">
</asp:datagrid>
</div>
</form>
</body>
</html>

Mortar said:
i need a datagrid with 2 header columns. The top one might have 1
column spanning 5 columns of the header row below it.

what is the best way to do this? Could i have 2 datatables...1 filling
the top row, and the 2nd header row would come from the 2nd datatable?
In this case, i guess i would have to add a row manually above the
header row (2nd dataset) which is the set of 1st data?

if someone has ideas, code explaining it would be very helpful.
Click to expand...
Click to expand...
 
M

Mortar

hmm, om second thought looks like i'll have to do it your way....


Thanks Ken for the code. Much appreciated and useful. I understand
what you are doing, but am contemplating using no header on the grid
at all.

I am thinking of using 3 unions in my query (the 1st two being the
header rows, the 3rd being the dataset), then just manually changing
the background color of the 1st two rows to make them look like header
rows. What do you think?


Here's a script that should get you going. Let us know?

Ken
Microsoft MVP [ASP.NET]

<%@ Page Language="VB" %>
<script runat="server">
Dim dt As Data.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
' Have the first column header span
' two columns
' by Ken Cox Microsoft MVP [ASP.NET]
If e.Item.ItemType = ListItemType.Header Then
' Declare variables
Dim dgItem As DataGridItem
Dim tcells As TableCellCollection
Dim fcell As TableCell
Dim scell As TableCell
' Get a reference to the header row item
dgItem = e.Item
' Get a reference to the cells in the
' header row item
tcells = e.Item.Cells
' Get a reference to the cell we want to
' span. In this case, the first cell
fcell = e.Item.Cells(0)
' Set the text of the span cell
fcell.Text = "This is the spanned cell"
' Set the columns to span to 2
fcell.ColumnSpan = 2
' Get a reference to the second cell
scell = e.Item.Cells(1)
' Remove the second cell because it will
' be replaced by the spanning column
dgItem.Cells.Remove(scell)
End If
End Sub
Function CreateDataSource() As ICollection
' Create sample data for the DataList control.
dt = New Data.DataTable
Dim dr As Data.DataRow


' Define the columns of the table.
dt.Columns.Add(New Data.DataColumn("Student", GetType(String)))
dt.Columns.Add(New Data.DataColumn("Subject", GetType(String)))
dt.Columns.Add(New Data.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 Data.DataView = New Data.DataView(dt)
Return dv
End Function

</script>

<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:datagrid ID="DataGrid1" runat="server">
</asp:datagrid>
</div>
</form>
</body>
</html>

Mortar said:
i need a datagrid with 2 header columns. The top one might have 1
column spanning 5 columns of the header row below it.

what is the best way to do this? Could i have 2 datatables...1 filling
the top row, and the 2nd header row would come from the 2nd datatable?
In this case, i guess i would have to add a row manually above the
header row (2nd dataset) which is the set of 1st data?

if someone has ideas, code explaining it would be very helpful.
Click to expand...
Click to expand...
Click to expand...
 
M

Mortar

i goofed. My original post...i meant 2 header ROWS not columns. Sorry.

So the grid would look something like the following:

'', '', how many kids do you have?
firstname, lastname, no kids, 1 kid, 2 kids, more than 3 kids
Adam, Ant, 0, 0, 1, 0

so you can see, the top row...the question needs to span the possible
answers in the row below it. And the response would be a 1 or 0 (yes
or no)

so the top 2 rows are both headers, and then the 3rd and onward are
the data.



Here's a script that should get you going. Let us know?

Ken
Microsoft MVP [ASP.NET]

<%@ Page Language="VB" %>
<script runat="server">
Dim dt As Data.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
' Have the first column header span
' two columns
' by Ken Cox Microsoft MVP [ASP.NET]
If e.Item.ItemType = ListItemType.Header Then
' Declare variables
Dim dgItem As DataGridItem
Dim tcells As TableCellCollection
Dim fcell As TableCell
Dim scell As TableCell
' Get a reference to the header row item
dgItem = e.Item
' Get a reference to the cells in the
' header row item
tcells = e.Item.Cells
' Get a reference to the cell we want to
' span. In this case, the first cell
fcell = e.Item.Cells(0)
' Set the text of the span cell
fcell.Text = "This is the spanned cell"
' Set the columns to span to 2
fcell.ColumnSpan = 2
' Get a reference to the second cell
scell = e.Item.Cells(1)
' Remove the second cell because it will
' be replaced by the spanning column
dgItem.Cells.Remove(scell)
End If
End Sub
Function CreateDataSource() As ICollection
' Create sample data for the DataList control.
dt = New Data.DataTable
Dim dr As Data.DataRow


' Define the columns of the table.
dt.Columns.Add(New Data.DataColumn("Student", GetType(String)))
dt.Columns.Add(New Data.DataColumn("Subject", GetType(String)))
dt.Columns.Add(New Data.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 Data.DataView = New Data.DataView(dt)
Return dv
End Function

</script>

<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:datagrid ID="DataGrid1" runat="server">
</asp:datagrid>
</div>
</form>
</body>
</html>

Mortar said:
i need a datagrid with 2 header columns. The top one might have 1
column spanning 5 columns of the header row below it.

what is the best way to do this? Could i have 2 datatables...1 filling
the top row, and the 2nd header row would come from the 2nd datatable?
In this case, i guess i would have to add a row manually above the
header row (2nd dataset) which is the set of 1st data?

if someone has ideas, code explaining it would be very helpful.
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

DataGrid header span 2 columns 7
Sticky Header - How Do I Make It Hide/Show on Scroll? 0
How to create 2 sections side by side in header section? 0
Survey details won't go through using php, ajax, Mysql 0
Value error: Argument Z must be 2-dimensional 0
2 Datagrid columns questions 2
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Datagrid Header from TableCell 0

Members online

Total: 31 (members: 1, guests: 30)
Robots: 300

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top