WinJS: How to limit the number of elements for the group?

161 Views Asked by At

How to limit the number of elements for the grouped WinJS.UI.ListView? For example, I need to output 2 columns for the group. Please note, the for horizontal and vertical orientations the number of items for one column may be different.

1

There are 1 best solutions below

5
On

If I understand your question correctly, you're wanting to limit the number of items that appear in a group such that you see only two columns, even if there are more items in that group. Is that correct? I know that some apps have this behavior where the last item in the second column is "..." to indicate that there's more. The Health & Fitness app in Windows does this.

There are a couple of options here. First is to consider using the Hub control, which gives you specific control over each section. This allows you to vary the layouts in each section, if desired. For more on this, see the HTML Hub Control Sample as well as Chapter 8 of my free ebook, Programming Windows Store Apps in HTML, CSS, and JavaScript, 2nd Edition. (The Health & Fitness app has a custom hub control, but it's the same idea.)

Second, if you just want to use a grouped ListView, you need to specifically limit the items in the data source that's used to build the ListView. So long as you have only two columns worth of items, it will render with just those two columns.

Of course, different screen sizes could mean different column heights, so you'll need to make this determination dynamically, calculating how many items will fit into those two columns, and then making the last item a "..." or such. You'd be doing the same thing for the horizontal vs. vertical layouts just with a different algorithm.