datagrid - 2 header columns

Discussion in 'ASP .Net' started by Mortar, Nov 22, 2005.

  1. Mortar

    Mortar Guest

    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.
    Mortar, Nov 22, 2005
    #1
    1. Advertising

  2. 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" <> wrote in message
    news:...
    >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.
    >
    Ken Cox [Microsoft MVP], Nov 23, 2005
    #2
    1. Advertising

  3. Mortar

    Mortar Guest

    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?


    On Tue, 22 Nov 2005 23:13:07 -0800, "Ken Cox [Microsoft MVP]"
    <> wrote:

    >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" <> wrote in message
    >news:...
    >>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.
    >>

    >
    Mortar, Nov 23, 2005
    #3
  4. Mortar

    Mortar Guest

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


    On Wed, 23 Nov 2005 16:59:32 GMT, (Mortar) wrote:

    >
    >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?
    >
    >
    >On Tue, 22 Nov 2005 23:13:07 -0800, "Ken Cox [Microsoft MVP]"
    ><> wrote:
    >
    >>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" <> wrote in message
    >>news:...
    >>>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.
    >>>

    >>

    >
    Mortar, Nov 23, 2005
    #4
  5. Mortar

    Mortar Guest

    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.



    On Tue, 22 Nov 2005 23:13:07 -0800, "Ken Cox [Microsoft MVP]"
    <> wrote:

    >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" <> wrote in message
    >news:...
    >>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.
    >>

    >
    Mortar, Nov 23, 2005
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    6,172
    Ken Cox [Microsoft MVP]
    Jan 26, 2005
  2. tshad

    DataGrid header span 2 columns

    tshad, Aug 22, 2005, in forum: ASP .Net
    Replies:
    7
    Views:
    6,144
  3. mlt
    Replies:
    2
    Views:
    808
    Jean-Marc Bourguet
    Jan 31, 2009
  4. rob thomson
    Replies:
    0
    Views:
    251
    rob thomson
    Sep 4, 2003
  5. ton
    Replies:
    2
    Views:
    199
    Alvin Bruney [MVP]
    Feb 11, 2004
Loading...

Share This Page