locked
Different items in listview RRS feed

  • 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