Answered by:
Different items in listview

Question
-
I use default visual studio split application and now I wish to achieve, that items listed in listview will not be the same.
For the sake of easyer explanation let's say, that i wish different font color's for odd and even items. Can I do this?
I get data with ajax request and then I display those request object's like item's in listview. Here I have different statuses(that's why I wish to create different items), for an example; readed, unreaded, urgent... So this is what I need, different statuses on listview items. Is it possible to display them as such?
Thanks
Tuesday, May 7, 2013 12:19 PM
Answers
-
You could go via databinding but that could become somewhat complex for your given use case.
The second option is to have a custom item renderer function. See "Using a function to display items" in http://msdn.microsoft.com/en-us/library/windows/apps/hh700705.aspx
It will be passed both the HTML element and the item data, then you can evaluate the item data and for example set CSS classes on the element.
- Marked as answer by Klemzy2013 Tuesday, May 7, 2013 12:37 PM
Tuesday, May 7, 2013 12:26 PM
All replies
-
You could go via databinding but that could become somewhat complex for your given use case.
The second option is to have a custom item renderer function. See "Using a function to display items" in http://msdn.microsoft.com/en-us/library/windows/apps/hh700705.aspx
It will be passed both the HTML element and the item data, then you can evaluate the item data and for example set CSS classes on the element.
- Marked as answer by Klemzy2013 Tuesday, May 7, 2013 12:37 PM
Tuesday, May 7, 2013 12:26 PM -
Thanks, i'm working on it now and it is awesome :)
The only thing that I can't achieve is to change color of active (clicked) item in listview. Hover works normaly with ":hover", but ":active" doesnt seams to work. I tryed with ".win-selectionbackground" to, but I didn't succeed.
#basicListView.win-listview.win-selectionstylefilled .win-selected .win-selectionbackground { background-color: red; border-color: red; }
<div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource : DataExample.itemList.dataSource}"> </div>
function itemTemplateFunction(itemPromise) { return itemPromise.then(function (item) { var parent = document.createElement("div"); var itemInfo = document.createElement("div"); WinJS.Utilities.addClass(parent, "item"); WinJS.Utilities.addClass(itemInfo, "item-info"); parent.appendChild(itemInfo); var img = document.createElement("img"); WinJS.Utilities.addClass(img, "item-image"); img.src = item.data.picture; img.alt = item.data.mbStatus; parent.appendChild(img); return parent; }); };
What am I doing wrong here?
Thanks
- Edited by Klemzy2013 Wednesday, May 8, 2013 8:14 AM
Wednesday, May 8, 2013 8:10 AM -
Maybe you are looking for the CSS classes "win-selected" & co? These are documented in http://msdn.microsoft.com/en-us/library/windows/apps/hh850406.aspx in the section "Styling selected items". You may also be interested in the section before that, "Styling items that have focus".Wednesday, May 8, 2013 8:16 AM -
Hah, I only add tapBehavior to listview data-win-options and now it works...gosh :)Wednesday, May 8, 2013 8:42 AM