DataGrid header span 2 columns

Discussion in 'ASP .Net' started by tshad, Aug 22, 2005.

  1. tshad

    tshad Guest

    I have a datagrid where each column has both a label and a linkbutton.

    I need to have the label left justified and the linkbutton right justified.
    In HTML, I would have to set up 2 cells to do this.

    Is there a way to accomplish this in a DataGrid (and have the text span both

    What I have is:

    <asp:TemplateColumn Visible="true" headerText="Bundle(10):"
    ItemStyle-Width="100" ItemStyle-VerticalAlign="Top">
    <asp:Label ID="Bundle10" text='<%#
    <asp:linkButton ID="Bundle10Link" text='Buy' runat="server"/>

    I could make this into 2 TemplateColumns and but the HeaderText would only
    be over the 1st column. There is no Header-Colspan attribute.

    I also tried to have 2 itemTemplates inside the TemplateColumn, but I guess
    you can't do that, as when I tried it, it only showed the 2nd itemTemplate.


    tshad, Aug 22, 2005
    1. Advertisements

  2. tshad

    Lucas Tam Guest

    You do this type of formatting in the OnItemDataBound Event.
    Lucas Tam, Aug 22, 2005
    1. Advertisements

  3. tshad

    tshad Guest

    But that is my problem.

    How would I do it?

    If it puts the label and linkbutton in the same cell, how do you tell it to
    align 1 left and 1 right?

    Or if you use 2 templateColumns, how do you tell the header to span 2


    tshad, Aug 22, 2005
  4. tshad

    Lucas Tam Guest

    You'll need to use CSS to align 2 items with 2 different alignments in the
    same cell.

    Otherwise use 2 cells (columns).
    Lucas Tam, Aug 22, 2005
  5. tshad

    tshad Guest

    I tried that:

    Here is the template Column:

    <asp:TemplateColumn Visible="true" headerText="Bundle(10):"
    ItemStyle-Width="90" ItemStyle-VerticalAlign="Top">
    <asp:Label ID="Bundle10ID" visible="false" text='<%#
    Container.DataItem("Bundle(10)ID")%>' runat="server"/>
    <asp:Label ID="Bundle10" CssClass="onleft" text='<%#
    <asp:linkButton ID="Bundle10Link" CssClass="onright"
    OnClick="GetPrice" text='Buy' runat="server"/>

    Here is the CSS:

    ..onright {text-align:right}
    ..onleft {text-align:left}

    Here is the output:

    <td valign="Top" style="width:90px;">
    <span id="JobPostingGrid__ctl3_Bundle10"
    <a id="JobPostingGrid__ctl3_Bundle10Link" class="onright"

    But it just puts the 2 objects next to each other.

    Am I using the wrong CSS?
    Problem is the Header.


    tshad, Aug 22, 2005
  6. John Timney \(ASP.NET MVP\), Aug 22, 2005
  7. tshad

    tshad Guest

    That's great.

    I didn't know you could muck around with the headers like that.

    The way I was going to solve it was to create a separate table just for the
    header (which also works), but this is definately a more elegant method.

    Solves the problem.


    tshad, Aug 23, 2005
  8. tshad


    May 4, 2012
    Likes Received:
    "There is no Header-Colspan attribute."
    Not at design time. You can get to it later.

    Use 2 columns and catch the ItemDataBound event for the grid. The code below gets rid of the third columnof the header and expands the second one to cover it.

    PrivateSub MyGrid_ItemDataBound(ByVal sender AsObject, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles MyGrid.ItemDataBound

    If e.Item.ItemType = ListItemType.Header Then
    'remove the third cell and make the second cell cover it
    e.Item.Cells(1).ColumnSpan = 2

    End If
    End Sub
    nak, May 4, 2012
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.