locked
Can i style individual items in a listview grid? RRS feed

  • Question

  • I see the use case of Contoso Food trucks and the hub page haves the layout diferent from the templates.

    One of the 'Near Me' items is big and the rest of the three or four elements have other sizes..

    How can i change the size of a specific item(win-item) without affecting the others ? Can i do it in CSS or i have to dig in the javascript properties?

    Thank u

    Wednesday, May 23, 2012 4:14 PM

Answers

  • You can use the template's data-win-bind to give each item a different style based on the data in the list.  For example you can change the background color of individual items.  

    var data = [{color:"red"}, {color:"green"}, {color:"blue"}]; var dataList = new WinJS.Binding.List(data); var listView = document.querySelector("#listView"); WinJS.UI.setOptions(listView, { itemDataSource: dataList.dataSource, itemTemplate: document.querySelector(".itemTemplate"),
    layout: new WinJS.UI.GridLayout()
    });

    <div class="itemTemplate" data-win-control="WinJS.Binding.Template"> <div class="item" data-win-bind="style.backgroundColor : color"> <!-- rest of the template --> </div> </div>

    <div id="listView" data-win-control="WinJS.UI.ListView"></div>  

    I believe this can be extended to control just about anything you can do with css for individual items.



    -Jeff


    Wednesday, May 23, 2012 5:21 PM
  • You could get even finer control with a custom render function:

    http://msdn.microsoft.com/en-us/library/windows/apps/Hh781224.aspx

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, May 24, 2012 7:12 PM
    Moderator

All replies

  • You can use the template's data-win-bind to give each item a different style based on the data in the list.  For example you can change the background color of individual items.  

    var data = [{color:"red"}, {color:"green"}, {color:"blue"}]; var dataList = new WinJS.Binding.List(data); var listView = document.querySelector("#listView"); WinJS.UI.setOptions(listView, { itemDataSource: dataList.dataSource, itemTemplate: document.querySelector(".itemTemplate"),
    layout: new WinJS.UI.GridLayout()
    });

    <div class="itemTemplate" data-win-control="WinJS.Binding.Template"> <div class="item" data-win-bind="style.backgroundColor : color"> <!-- rest of the template --> </div> </div>

    <div id="listView" data-win-control="WinJS.UI.ListView"></div>  

    I believe this can be extended to control just about anything you can do with css for individual items.



    -Jeff


    Wednesday, May 23, 2012 5:21 PM
  • You could get even finer control with a custom render function:

    http://msdn.microsoft.com/en-us/library/windows/apps/Hh781224.aspx

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, May 24, 2012 7:12 PM
    Moderator