Complex DataList formatting with a <table>

  • Thread starter Thread starter Leo Duran
  • Start date Start date
L

Leo Duran

Hi,



I am working on an app right now that makes extensive use of the DataList
control. I chose the DataList because I need to do multi row formatting. I
am using it like so.



<DataList id="test" runat="server>

<HeaderTemplate>

<table>

<tr>

<td>

First Name

</td>

<td>

Last Name

</td>



</tr>

<tr>

<td colspan=2>

Address

</td>

</tr>

</HeaderTemplate>

<ItemTemplate>

<tr>

<td>

DataBinder.Eval code..

</td>

<td>

DataBinder.Eval code..

</td>

</tr>

<tr>

<td colspan=2>

DataBinder.Eval code..

</td>

</tr>



</ItemTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</DataList>



For simplicities sake I left out quite a few controls. Because I am
overlapping the <table> tags with the Item Template, Footer Template, and
Header Template, the <SelectedItemStyle> formatting isn't working after I
select one of the rows. If I make the <ItemTemplate> have a nested
<table></table> tag without overlapping the Header, Item, and Footer
Templates, the <SelectedItemStyle> works fine. However, I am doing it this
way because I need the table rows to line up between the header and items.



I found a way to work around the SelectedItemStyle problem. I capture the
ItemCommand event of the DataList, and I use the following code to highlight
the selected item.



foreach(Control ctrl in e.item.controls)

{

if(ctrl is LiteralControl)

{

((LiteralControl)ctrl).Text =
((LiteralControl)ctrl).Text.Replace("<tr>", "<tr bgcolor=\"Gold\"");

}

}



It works for the most part, however, when I select another element on the
page that causes a postback, the SelectedItem looses its highlighting as the
page re-draws.



Any ideas?
 
One thing I have found in my reading is that the order of
your templates is important. I don't remember the exact
order but I do remember that the header template comes
first followed by the footer template and then any other
templates you want to set up.
 
Hi Leo,

I think you may consider adding the style to <tr> tag in the SelectedItem
template. For example:


<SelectedItemTemplate >
<tr bgcolor=Yellow>
<td></td>
<td>
<asp:Label id="ItemLabel" Text='<%# DataBinder.Eval(Container.DataItem,
"Item") %>' runat="server"/>
</td>
<td>
<asp:Label id="QtyLabel" Text='<%# DataBinder.Eval(Container.DataItem,
"Qty") %>' runat="server"/>
</td>
<td>
<asp:Label id="PriceLabel" Text='<%# DataBinder.Eval(Container.DataItem,
"Price", "{0:c}") %>' runat="server"/>
</td>
</tr>
</SelectedItemTemplate>

This also can make the selected Item has yellow backgroud

Luke
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
 
Back
Top