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
    columns).

    What I have is:

    <asp:TemplateColumn Visible="true" headerText="Bundle(10):"
    ItemStyle-Width="100" ItemStyle-VerticalAlign="Top">
    <itemtemplate>
    <asp:Label ID="Bundle10" text='<%#
    String.Format("{0:$#,##0}",Container.DataItem("Bundle(10)"))%>'
    runat="server"/>
    <asp:linkButton ID="Bundle10Link" text='Buy' runat="server"/>
    </itemtemplate>
    </asp:TemplateColumn>

    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.

    Thanks,

    Tom
     
    tshad, Aug 22, 2005
    #1
    1. Advertisements

  2. tshad

    Lucas Tam Guest

    You do this type of formatting in the OnItemDataBound Event.
     
    Lucas Tam, Aug 22, 2005
    #2
    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
    columns?

    Thanks,

    Tom
     
    tshad, Aug 22, 2005
    #3
  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
    #4
  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">
    <itemtemplate>
    <asp:Label ID="Bundle10ID" visible="false" text='<%#
    Container.DataItem("Bundle(10)ID")%>' runat="server"/>
    <asp:Label ID="Bundle10" CssClass="onleft" text='<%#
    String.Format("{0:$#,##0}",Container.DataItem("Bundle(10)"))%>'
    runat="server"/>
    <asp:linkButton ID="Bundle10Link" CssClass="onright"
    OnClick="GetPrice" text='Buy' runat="server"/>
    </itemtemplate>

    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"
    class="onleft">$1,400</span>
    <a id="JobPostingGrid__ctl3_Bundle10Link" class="onright"
    href="javascript:__doPostBack('JobPostingGrid$_ctl3$Bundle10Link','')">Buy</a>
    </td>

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

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


    Thanks,

    Tom
     
    tshad, Aug 22, 2005
    #5
  6. John Timney \(ASP.NET MVP\), Aug 22, 2005
    #6
  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.

    Thanks,

    Tom
     
    tshad, Aug 23, 2005
    #7
  8. tshad

    nak

    Joined:
    May 4, 2012
    Messages:
    1
    Likes Received:
    0
    Location:
    Ohio
    "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.RemoveAt(2)
    e.Item.Cells(1).ColumnSpan = 2
    Return

    End If
    End Sub
     
    nak, May 4, 2012
    #8
    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.