DataGrid header span 2 columns

[tshad]

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

 

[Lucas Tam]

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

You do this type of formatting in the OnItemDataBound Event.

 

[tshad]

You do this type of formatting in the OnItemDataBound Event.

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

 

[Lucas Tam]

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

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

Otherwise use 2 cells (columns).

 

[tshad]

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

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?

Otherwise use 2 cells (columns).

Problem is the Header.


Thanks,

Tom

 

[John Timney \(ASP.NET MVP\)]

read this - it might help

http://www.codeproject.com/aspnet/MergeDatagridHeader.asp

--
Regards

John Timney
ASP.NET MVP
Microsoft Regional Director

 

[tshad]

read this - it might help

http://www.codeproject.com/aspnet/MergeDatagridHeader.asp

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

 

[nak]

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).
[snip]

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

"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