N
Nathan Sokalski
I have a DataList in which I want to allow people to select an Item. My
DataList and CSS classes look like the following:
<aspataList ID="datProductList" runat="server" ShowFooter="false"
ShowHeader="false">
<ItemStyle BackColor="White" BorderWidth="0" ForeColor="Black"
Wrap="false"/>
<SelectedItemStyle BackColor="Blue" BorderWidth="0" ForeColor="White"
Wrap="false"/>
<ItemTemplate>
<asp:LinkButton ID="lnkProductNumber" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"productnumber") %>' Width="100px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkProductName" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"name") %>' Width="125px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkPrice" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"price","{0:C}") %>' Width="60px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkBrand" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"brandname") %>' Width="100px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkCategory" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"categoryname") %>' Width="125px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkInStock" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"productnumber") %>' Width="60px"
EnableViewState="false" CssClass="ProductListItem"/>
</ItemTemplate>
<SelectedItemTemplate>
<asp:Label ID="lblProductNumber" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"productnumber") %>' Width="100px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblProductName" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"name") %>' Width="125px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblPrice" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"price","{0:C}") %>' Width="60px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblBrand" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"brandname") %>' Width="100px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblCategory" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"categoryname") %>' Width="125px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblInStock" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"productnumber") %>' Width="60px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
</SelectedItemTemplate>
</aspataList>
..ProductListItem{display:inline-block;overflow-x:hidden;background-color:white;color:black;text-decoration:none;}
..ProductListItemSelected{display:inline-block;overflow-x:hidden;background-color:blue;color:white;text-decoration:none;}
You will notice that the only differences between the Templates is that the
ItemTemplate uses LinkButtons and ProductListItem, while the
SelectedItemTemplate uses Labels and ProductListItemSelected, and the only
difference between the CSS classes is the background-color and color
properties. When I select an item, it changes the style to
SelectedItemStyle, but it does not use the SelectedItemTemplate (I can see
this by doing a view source, the selected item has different style
properties in the <td>, but it still uses the same controls, in this case
the <a> tag, but it should be using <span>). Because this creates CSS in the
<td> tag that contains each item, it does not work, because the CSS class is
overriding the style from <td> tag. Why is the DataList switching styles but
not templates, and what can I do about it? The code I use to select an item
is the following:
Private Sub datProductList_ItemCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataListCommandEventArgs) Handles
datProductList.ItemCommand
Me.datProductList.SelectedIndex = e.Item.ItemIndex
End Sub
This testing was done on Windows Vista and IE7. Thanks
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/
DataList and CSS classes look like the following:
<aspataList ID="datProductList" runat="server" ShowFooter="false"
ShowHeader="false">
<ItemStyle BackColor="White" BorderWidth="0" ForeColor="Black"
Wrap="false"/>
<SelectedItemStyle BackColor="Blue" BorderWidth="0" ForeColor="White"
Wrap="false"/>
<ItemTemplate>
<asp:LinkButton ID="lnkProductNumber" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"productnumber") %>' Width="100px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkProductName" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"name") %>' Width="125px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkPrice" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"price","{0:C}") %>' Width="60px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkBrand" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"brandname") %>' Width="100px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkCategory" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"categoryname") %>' Width="125px"
EnableViewState="false" CssClass="ProductListItem"/>
<asp:LinkButton ID="lnkInStock" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"productnumber") %>' Width="60px"
EnableViewState="false" CssClass="ProductListItem"/>
</ItemTemplate>
<SelectedItemTemplate>
<asp:Label ID="lblProductNumber" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"productnumber") %>' Width="100px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblProductName" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"name") %>' Width="125px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblPrice" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"price","{0:C}") %>' Width="60px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblBrand" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"brandname") %>' Width="100px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblCategory" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"categoryname") %>' Width="125px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
<asp:Label ID="lblInStock" runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"productnumber") %>' Width="60px"
EnableViewState="false" CssClass="ProductListItemSelected"/>
</SelectedItemTemplate>
</aspataList>
..ProductListItem{display:inline-block;overflow-x:hidden;background-color:white;color:black;text-decoration:none;}
..ProductListItemSelected{display:inline-block;overflow-x:hidden;background-color:blue;color:white;text-decoration:none;}
You will notice that the only differences between the Templates is that the
ItemTemplate uses LinkButtons and ProductListItem, while the
SelectedItemTemplate uses Labels and ProductListItemSelected, and the only
difference between the CSS classes is the background-color and color
properties. When I select an item, it changes the style to
SelectedItemStyle, but it does not use the SelectedItemTemplate (I can see
this by doing a view source, the selected item has different style
properties in the <td>, but it still uses the same controls, in this case
the <a> tag, but it should be using <span>). Because this creates CSS in the
<td> tag that contains each item, it does not work, because the CSS class is
overriding the style from <td> tag. Why is the DataList switching styles but
not templates, and what can I do about it? The code I use to select an item
is the following:
Private Sub datProductList_ItemCommand(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataListCommandEventArgs) Handles
datProductList.ItemCommand
Me.datProductList.SelectedIndex = e.Item.ItemIndex
End Sub
This testing was done on Windows Vista and IE7. Thanks
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/