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

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

Hah, I only add tapBehavior to listview data-win-options and now it works...gosh :)