How to change the color of selected item in the listview and reset the original color if other item is selected from the same listview.

Question

Hi everyone,

I m using two listview, one to show all the restaurants in particular area and other to show Menu of the restaurant respectively.

If i select one  restaurant then background color should change to blue, and all other other restaurant bcolor is red. If any other restaurant is selected then this bcolor should change to blue n all other should change to red.

   <div id="Cuisine_category" data-win-control="WinJS.Binding.Template">
          <div id="Category_data"  > 
               <h3 data-win-bind="innerText: Name" ></h3>            
          </div>  
     </div>
 <div id="basicListView_MenuList" data-win-control="WinJS.UI.ListView" > </div> 

I m using this code to display restaurant name.

How to set and reset bgcolor programmatically.

Thanks,

      

---

Shilpa Monocept Windows store apps

Answer 1

Hi Shilpa_A_S,

Before you going the programmtic approach, I suggest you take a look at the styling options available for customizing windows store ListView control (and its items). We can use style to control most of the common appearnce behaviors:

#Styling the ListView and its items (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh850406.aspx

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Hi Steven Cheng,

Thanks for ur suggestion.

I tried this one

#Category_data.win-selectionbackground {
background-color: #BE1C29 !important;

}

to change bgcolor when the item is selected but its not working. What might be the problem.

---

Shilpa Monocept Windows store apps

Answer 3

Hello, that CSS selector isn't working because the win-selectionbackground class is not being applied to the Category_data element in your template. To use win-selectionbackground you can use a selector like "#Cuisine_category .win-selectionbackground" to target the selected item in your listview.

However, since you want your listview items to have a default background color of blue, and then red when they're selected, I would try something like the following two rules using the class win-selected to target the selected item. (I would also suggest changing your template to use a class for 'Category_data' instead of an id since there will be multiple instances of that element).

 

<div id="Cuisine_category" data-win-control="WinJS.Binding.Template">
    <div class="Category_data"  > 
        <h3 data-win-bind="innerText: Name" ></h3>            
    </div>  
</div>

#basicListView_MenuList .Category_data {
    background-color: #1C33BE;
}
		
#basicListView_MenuList .win-selected .Category_data {
    background-color: #BE1C29;
}

Thank you,

Joel