DataList not using correct template

Discussion in 'ASP .Net' started by Nathan Sokalski, Sep 11, 2007.

  1. I have a DataList in which I want to allow people to select an Item. My
    DataList and CSS classes look like the following:


    <asp:DataList 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>
    </asp:DataList>

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

    http://www.nathansokalski.com/
    Nathan Sokalski, Sep 11, 2007
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nevyn Twyll
    Replies:
    8
    Views:
    1,846
  2. joon
    Replies:
    1
    Views:
    511
    Roedy Green
    Jul 8, 2003
  3. Dan

    correct or not correct?

    Dan, Oct 2, 2003, in forum: HTML
    Replies:
    7
    Views:
    431
  4. J.Ram
    Replies:
    7
    Views:
    639
  5. Nathan Sokalski

    DataList not using correct template

    Nathan Sokalski, Sep 11, 2007, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    149
    Nathan Sokalski
    Sep 11, 2007
Loading...

Share This Page