Two column header rows possible?

Discussion in 'ASP .Net Datagrid Control' started by Bill Musgrave, Dec 13, 2004.

  1. 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, Dec 13, 2004
    #1
    1. Advertising

  2. 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" <> wrote in message
    news:%...
    > 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, Dec 14, 2004
    #2
    1. Advertising

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


    "Eliyahu Goldin" <> wrote in message
    news:...
    > 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" <> wrote in message
    > news:%...
    > > 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, Dec 14, 2004
    #3
  4. 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


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


    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

    "Bill Musgrave" <> wrote in message
    news:%...
    > 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
    >
    >
    Ken Cox [Microsoft MVP], Dec 15, 2004
    #4
  5. 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" <> wrote in message
    news:...
    > 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
    >
    >
    > "Eliyahu Goldin" <> wrote in message
    > news:...
    > > 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" <> wrote in message
    > > news:%...
    > > > 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, Dec 15, 2004
    #5
  6. Ken thanks for your response, it helped tons.

    Merry Christmas
    Bill

    "Ken Cox [Microsoft MVP]" <> wrote in message
    news:...
    > 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
    >
    >
    > <asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False"
    > ShowHeader="False">
    > <Columns>
    > <asp:BoundColumn DataField="Subject"></asp:BoundColumn>
    > <asp:BoundColumn DataField="Day"></asp:BoundColumn>
    > </Columns>
    > </asp:DataGrid>
    >
    >
    > 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
    >
    > "Bill Musgrave" <> wrote in message
    > news:%...
    > > 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, Dec 23, 2004
    #6
  7. Eilyahu

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

    Merry Christmas
    Bill

    "Eliyahu Goldin" <> wrote in message
    news:...
    > 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" <> wrote in message
    > news:...
    > > 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
    > >
    > >
    > > "Eliyahu Goldin" <> wrote in message
    > > news:...
    > > > 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" <> wrote in message
    > > > news:%...
    > > > > 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, Dec 23, 2004
    #7
    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. Bruce W...1

    Column span two rows?

    Bruce W...1, Oct 21, 2003, in forum: HTML
    Replies:
    2
    Views:
    486
    Mark Nobles
    Oct 24, 2003
  2. mlt
    Replies:
    2
    Views:
    808
    Jean-Marc Bourguet
    Jan 31, 2009
  3. VijayRama
    Replies:
    2
    Views:
    2,291
    Gregory A. Beamer
    Oct 12, 2009
  4. hansiman

    Image in header column (not replacing column header text)

    hansiman, Feb 5, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    3
    Views:
    290
    hansiman
    Feb 7, 2004
  5. datagrid having row header and column header

    , Jul 13, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    164
Loading...

Share This Page