Question

My application has an <asp:ListView>. When one item is selected, I just want to change the background color to provide focus to the selected item.

The code excerpt:

<asp:ListView id="ordersList" runat="server"
                InsertItemPosition="LastItem" 
                onpagepropertieschanged="ordersList_PagePropertiesChanged" 
                onitemdeleting="ordersList_ItemDeleting" 
                oniteminserting="ordersList_ItemInserting" 
                onitemupdating="ordersList_ItemUpdating" 
                onitemcanceling="ordersList_ItemCanceling" 
                onitemediting="ordersList_ItemEditing" 
                onitemdatabound="ordersList_ItemDataBound" 
    DataKeyNames="OrderID" 
    onselectedindexchanging="ordersList_SelectedIndexChanging">
    <LayoutTemplate>
        <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>                        
    </LayoutTemplate>

    <ItemTemplate>
        <div>
            <asp:ImageButton ID="imgSelect"  ImageUrl="~/img/bullet_go.png" runat="server" 
                CommandName="Select" ToolTip="select item" meta:resourcekey="imgSelectResource1"/>
            <asp:ImageButton ID="imgEdit"  ImageUrl="~/img/pencil.png" runat="server" 
                CommandName="Edit" ToolTip="edit item" meta:resourcekey="imgEditResource1"/>
            <asp:ImageButton ID="imgDelete"  ImageUrl="~/img/delete.png" runat="server" 
                CommandName="Delete" ToolTip="delete item" meta:resourcekey="imgDeleteResource1"/>

            <!-- Fields goes here -->
            <asp:Label ID="lblOrderId" Text='<%# Eval("OrderID") %>' runat="server" />
            <asp:Label ID="lblCustomer" Text='<%# Eval("Customer.CompanyName") %>' runat="server" />
            <asp:Label ID="lblEmployee" Text='<%# Eval("Employee.FullName") %>' runat="server" />
            <asp:Label ID="lblOrderDate" Text='<%# Eval("OrderDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblRequiredDate" Text='<%# Eval("RequiredDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblShippedDate" Text='<%# Eval("ShippedDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblTotal" Text='<%# Eval("Total", "{0:N2}") %>' runat="server" />
        </div>
    </ItemTemplate>
    <SelectedItemTemplate>
        <div style="background-color:Navy; color:White; padding:0px;>
            <asp:ImageButton ID="imgSelect"  ImageUrl="~/img/bullet_go.png" runat="server" 
                CommandName="Select" ToolTip="select item" meta:resourcekey="imgSelectResource1"/>
            <asp:ImageButton ID="imgEdit"  ImageUrl="~/img/pencil.png" runat="server" 
                CommandName="Edit" ToolTip="edit item" meta:resourcekey="imgEditResource1"/>
            <asp:ImageButton ID="imgDelete"  ImageUrl="~/img/delete.png" runat="server" 
                CommandName="Delete" ToolTip="delete item" meta:resourcekey="imgDeleteResource1"/>
            <!-- Fields goes here -->
            <asp:Label ID="lblOrderId" Text='<%# Eval("OrderID") %>' runat="server" />
            <asp:Label ID="lblCustomer" Text='<%# Eval("Customer.CompanyName") %>' runat="server" />
            <asp:Label ID="lblEmployee" Text='<%# Eval("Employee.FullName") %>' runat="server" />
            <asp:Label ID="lblOrderDate" Text='<%# Eval("OrderDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblRequiredDate" Text='<%# Eval("RequiredDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblShippedDate" Text='<%# Eval("ShippedDate", "{0:d}") %>' runat="server" />
            <asp:Label ID="lblTotal" Text='<%# Eval("Total", "{0:N2}") %>' runat="server" />
        </div>
    </SelectedItemTemplate>
</asp:ListView>

The problem is:

I´m doing this replicating the code of <ItemTemplate> in <SelectedItemTemplate> and just changing the style of the <div>. The problem is that this generates a lot of redundant code: though I just want to change the background style, yet I recopy all fields.

This is the best way to accomplish this or could someone suggest a better one?

Thanks!

Answer 1

In your ordersList_ItemDataBound event you can check if the current item index is equals the selected list index, just like that:


if (((ListView)sender).SelectedIndex == e.Item.DisplayIndex)


If it is true you can add the style to your div, but to get your div on the server side you have to make your div runat server and assing an id to it, something like:

<div runat="server" id="area">

The final code will looks like this:

  if (((ListView)sender).SelectedIndex == e.Item.DisplayIndex)
  {
      var ctrl = (HtmlContainerControl)e.Item.FindControl("area");
      ctrl.Attributes["style"] = "background-color:Navy; color:White; padding:0px;";
  }