locked
Limit the Items shown by listView?

    Question

  • Hi,

    is there any means of setting a listview to only show x number of items per group?

    I have a datasource that returns an unknown number of items per group but I would like to limit the listview to only display a certain number to stop it from becoming too large.

    Thanks,

    Felix

    Thursday, June 07, 2012 1:30 PM

Answers

  • If there is I haven't seen one. Normally you'd have whatever returns your data limit the resultset to save memory and transport cost. 

    Anyway, I wrote a little sample code that you can tweak to prefilter your WinJS.Binding.List to the appropriate number of items in the group (by grabbing the first N items in each group).

    item.group is really just a way to get a key for the group the item is in, you can replace that with whatever groupKey function you pass to list.createGrouped();

    var data = [
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "fifth", value: 5 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "first", value: 1 },
    ];
    
    var list = new WinJS.Binding.List(data);
    
    var groupCount = {};
    var maxItems = 3;
    
    var filteredList = list.createFiltered(function _filterItems(item) {
        groupCount[item.group] = groupCount[item.group] ? groupCount[item.group] + 1 : 1;
        return groupCount[item.group] <= maxItems;
    });




    Thursday, June 07, 2012 4:49 PM

All replies

  • Would it be possible to use a filter on WinJS.Binding.List?

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

    I don't have a Windows 8 machine in front of me right now, but maybe there would be a way to setup a filter that only returns the first x items in each group.

    Dave

    Thursday, June 07, 2012 4:41 PM
  • If there is I haven't seen one. Normally you'd have whatever returns your data limit the resultset to save memory and transport cost. 

    Anyway, I wrote a little sample code that you can tweak to prefilter your WinJS.Binding.List to the appropriate number of items in the group (by grabbing the first N items in each group).

    item.group is really just a way to get a key for the group the item is in, you can replace that with whatever groupKey function you pass to list.createGrouped();

    var data = [
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "first", value: 1 },
        { group: "second", value: 2 },
        { group: "third", value: 3 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "fifth", value: 5 },
        { group: "forth", value: 4 },
        { group: "fifth", value: 5 },
        { group: "first", value: 1 },
    ];
    
    var list = new WinJS.Binding.List(data);
    
    var groupCount = {};
    var maxItems = 3;
    
    var filteredList = list.createFiltered(function _filterItems(item) {
        groupCount[item.group] = groupCount[item.group] ? groupCount[item.group] + 1 : 1;
        return groupCount[item.group] <= maxItems;
    });




    Thursday, June 07, 2012 4:49 PM
  • Cool thanks that was what I needed! 

    I ended up using createFiltered instead as I needed to keep the List dynamic. Seems to work though!

    Thursday, June 07, 2012 8:05 PM
  • Cool thanks that was what I needed! 

    I ended up using createFiltered instead as I needed to keep the List dynamic. Seems to work though!


    Good catch, I actually meant to use that one instead.
    Thursday, June 07, 2012 8:10 PM