locked
Data binding using different templates on the same ListView with groups.

    Question

  • hi, i used this guide to create a ListView with grouped items. I use data binding to load my data. All good so far.

    What I want to do is to use a different WinJS.Binding.Template for each group, or even a different template for some group items.

    Is this possible to do it with data binding based on a specific value of each item ?

     

    Thank you

     

    edit1: the approach i am using atm is to have, in the same template, different div's for each sub-template that I need and set the display to block only on the div i need based on a databinding. But i doubt that this is the best approach.

    edit2: I noticed that the problem with this approach is that all list elements are forced to get the same width and height, no matter which div i display.

    • Edited by babs9999 Wednesday, September 28, 2011 10:04 AM
    Wednesday, September 28, 2011 8:18 AM

Answers

  • How big are the groups of items?

    Listview is designed to be a virtualized view over a larger set of records, if what you are looking for is the ability to do a view that is similar to listview's, but have a small number of items in each group (say less than 50), then it may be worth considering doing your own layout, and not using listview. The css flexbox can be used to do the layout of a series of items into columns & rows. You can use the same templating mechanism as listview to programmatically generate html from data, and say use a different template for each group. And then stack a set of those views together in a scrollable div.

    If the data set is larger then listview is probably your best bet. To enable virtualization, the sizes of items needs to be predictable and so in most cases the sizes for each item needs to be the same. There is a way to enable the first items in a group to be larger, which I think Ryan covered in his talk APP-209T, but I don't think that will help for your case.

    Instead of using a declarative template, you can use a custom render function for listview. It will be passed the item, and is responsible for returning back a dom element. You can potentially use that to select from a set of templates depending on the group, and then call into the template to render the item. However all the items will need to be the same size.

    • Marked as answer by babs9999 Friday, September 30, 2011 11:51 AM
    Wednesday, September 28, 2011 4:55 PM
  • To make the first item larger you need to simply set a CSS style for the first item.  See: http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1006   About 48 Minutes into the talk sets up the stage and you will see how to do this.  You set a class based CSS selector and then you can set the left margin of the first item. (50:30 into the talk)
    Jeff Sanders (MSFT)
    Tuesday, October 4, 2011 8:16 PM
    Moderator

All replies

  • Hi Babs!

    I think of templates as the layout to display data in a certain format.  You can definitely do conditional formatting using CSS of course within the template.

    If you wanted to separate your groups and display entirely differently based on those groups, I would think having different data sources with different templates would be the way to go.

    You can also manually create HTML if you are getting REALLY tricky on how you are displaying items but since templates and CSS are pretty flexible, you can probably stick to that.  It would really depend on figuring out if what you want to do would lend itself to these techniques!

     


    Jeff Sanders (MSFT)
    Wednesday, September 28, 2011 3:37 PM
    Moderator
  • How big are the groups of items?

    Listview is designed to be a virtualized view over a larger set of records, if what you are looking for is the ability to do a view that is similar to listview's, but have a small number of items in each group (say less than 50), then it may be worth considering doing your own layout, and not using listview. The css flexbox can be used to do the layout of a series of items into columns & rows. You can use the same templating mechanism as listview to programmatically generate html from data, and say use a different template for each group. And then stack a set of those views together in a scrollable div.

    If the data set is larger then listview is probably your best bet. To enable virtualization, the sizes of items needs to be predictable and so in most cases the sizes for each item needs to be the same. There is a way to enable the first items in a group to be larger, which I think Ryan covered in his talk APP-209T, but I don't think that will help for your case.

    Instead of using a declarative template, you can use a custom render function for listview. It will be passed the item, and is responsible for returning back a dom element. You can potentially use that to select from a set of templates depending on the group, and then call into the template to render the item. However all the items will need to be the same size.

    • Marked as answer by babs9999 Friday, September 30, 2011 11:51 AM
    Wednesday, September 28, 2011 4:55 PM
  • thanx a lot for the usefull information.

    I watched ryan's talk, very usefull too. unfortunately i didn't see something about making the first item of the list larger.

    I think I might be able to use the header template to present the first element a bit different, unless I find another way.

     

    thnx

     

    Friday, September 30, 2011 1:25 PM
  • To make the first item larger you need to simply set a CSS style for the first item.  See: http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1006   About 48 Minutes into the talk sets up the stage and you will see how to do this.  You set a class based CSS selector and then you can set the left margin of the first item. (50:30 into the talk)
    Jeff Sanders (MSFT)
    Tuesday, October 4, 2011 8:16 PM
    Moderator
  • edit2: I noticed that the problem with this approach is that all list elements are forced to get the same width and height, no matter which div i display.

    There is a listview styling sample (http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f) which shows how to get around this. You will need to create a custom function to render the items and set this as your itemTemplate.  You will also need to define a groupInfo() object and set the mutisize property on it to true:

    function groupInfo() {
        return {
            multiSize: true,
            slotWidth: 310,
            slotHeight: 80            
        };
    }

    You can then set the listLayout to define the groupInfo and the layout type:

    <div id="listView4" 
                                data-win-control="WinJS.UI.ListView" 
                                data-win-options="{ itemTemplate: MyItemTemplate4, layout: { groupInfo: groupInfo, type: WinJS.UI.GridLayout } }"
                            ></div>

    With this change, your listitems will now have whatever size you specify on individual items.

    Unfortunately, there is currenly very little documentation on the groupInfo object on MSDN. Hopefully this gets fixed toon.

    Monday, April 2, 2012 3:28 AM
  • I follow the ListView-item-templates sample.  However, even with the groupInfo(), I still end up with uniform selection size.  Each list item is drawn with my new CSS style big one, then couple small ones.  However, when I hit F5, each item is still space out equally taking the first item size as the default.

    I added this groupInfo() to my app, also adjusting the slothWidth and slothHeight, didn't help.

    I also added to the html, data-win-options like you list above. Is there any other thing I miss?

    Also I created custom function to render each items, like the MyItemTemplate4, also I tried with MyItemTemplate5, both render with the same issue.

    thanks!

    Wednesday, April 11, 2012 7:11 AM
  • Hello Jeff,

    Thanks for sharing that information. Is that possible with C#? I mean, what can I do if I'm not using CSS?

    Thanks in advance,

    Paulo

    Wednesday, July 10, 2013 8:28 PM
  • Hi Paulo,

    Please post your XAML questions on the Windows Store app C# forum. 

    Chances are if you search over there it has already been answered for you too!

    Thanks!

    Jeff


    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Monday, July 15, 2013 3:01 PM
    Moderator