Answered by:
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 7, 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; });
- Proposed as answer by Bryan Thomas Thursday, June 7, 2012 4:50 PM
- Marked as answer by CensoredUser Thursday, June 7, 2012 8:04 PM
- Edited by Bryan Thomas Friday, June 8, 2012 4:55 PM createFiltered
Thursday, June 7, 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 7, 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; });
- Proposed as answer by Bryan Thomas Thursday, June 7, 2012 4:50 PM
- Marked as answer by CensoredUser Thursday, June 7, 2012 8:04 PM
- Edited by Bryan Thomas Friday, June 8, 2012 4:55 PM createFiltered
Thursday, June 7, 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 7, 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 7, 2012 8:10 PM