locked
Count how many items in each listview's group?

    Question

  • Hi all.

    I can grouped item in my listview, created a semantic zoom.

    Now, I want to display how many items in each group when semantic zoomed out.

    Example:
    If I have 3 groups "A", "B", "C" And each group contain 3, 4, 5 items. I want to display item count along with group name when zoomed out like: "A 3 items", "B 4 items", "C 5 items".

    So, how can I count items for each group and send the result to createdGroup function for binding?

    Thanks, and sorry for my bad English.

    Monday, May 27, 2013 12:06 PM

Answers

  • Ok.. Here is what you can do.. You still need to use a converter.

    1. Get your data from any source and group it the way you want. Make sure your data is available to all. Declare the data in a namespace

    2. In the group template, pass the key.. In the converter get the group using this key, from the grouped data above get items for the group and return it to be shown.

    In the Grid project template (that comes default with the VS when you create a new Grid Application) I tried this and below are my changes and result.

    I created a Utilities.js under data.js folder. Added this function:

    (function () {
        WinJS.Namespace.define("Converters", {
    
            ItemsInGroup: WinJS.Binding.converter(function (value) {
                var group = Data.resolveGroupReference(value);
                return "(" + Data.getItemsFromGroup(group).length + ")";
            })
        });
    })();

    Modified the template for groupeditems.HTML to replace the Chevron with items count: (Changed is in bold)

    <!-- These templates are used to display each item in the ListView declared below. -->
    
        <div class="headertemplate" 
    data-win-control="WinJS.Binding.Template">
            <button class="group-header 
    win-type-x-large win-type-interactive" 
    data-win-bind="groupKey: key"
                onclick="Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)" 
    role="link" tabindex="-1" type="button">
                <span class="group-title win-type-ellipsis"
     data-win-bind="textContent: title"></span>
                <span class="group-chevron" 
    data-win-bind="textContent: key Converters.ItemsInGroup"></span>
            </button>
        </div>

    I hid the chevron in CSS (I will show the item count instead of the Chevron) :

    /*Comment out the Chevron code */
    
    /*.groupeditemspage .groupeditemslist .group-header .group-chevron::before {
                    content: "\E26B";
                    font-family: 'Segoe UI Symbol';
                }
    
                .groupeditemspage .groupeditemslist.win-rtl .group-header .group-chevron:before {
                    content: "\E26C";
                }*/

    That is it. Below is my result.. you can see the item count in the screen shot (within brackets):

    - Girija



    Tuesday, May 28, 2013 6:52 PM

All replies

  • You might want to use a WinJS Converter in the HTML. It should accept the grouped data and return you count of items...

    Something like this :

    //Converter function
            itemCountConverter: WinJS.Binding.converter(function (groupedData) {
                return groupedData.length        
    })
    

    - Girija
    • Proposed as answer by Ramya SJ Thursday, June 13, 2013 1:52 PM
    Monday, May 27, 2013 7:57 PM
  • My problem is not showing the count number. My problem is I currently can't count the item in group. :(

    Tuesday, May 28, 2013 4:50 AM
  • When you have data grouped and you have the group, where is that you are getting issue calculating the items count.

    Please share some sample code and explain where exactly is the issue.

    - Girija

    Tuesday, May 28, 2013 6:25 AM
  • OK. I now have items loaded from my server and push it into the Binding List and use createGrouped function to grouped items.

    var itemList = new WinJS.Binding.List().createGrouped(groupKey, groupData);

    groupKey is just a function to return a group key and groupData is a function to return data of a group.

    My problem is I don't know which item would be in which group until it created grouped. But after it created grouped it also done the binding to my template so I can't send an item_count to my groupData (for binding).

    Also, the easiest way I think of now is create a new loop through all my item to count all item before the loop that push item in Binding List, but I think it's not good to create another loop just to count items.
    Tuesday, May 28, 2013 6:40 AM
  • Ok.. Here is what you can do.. You still need to use a converter.

    1. Get your data from any source and group it the way you want. Make sure your data is available to all. Declare the data in a namespace

    2. In the group template, pass the key.. In the converter get the group using this key, from the grouped data above get items for the group and return it to be shown.

    In the Grid project template (that comes default with the VS when you create a new Grid Application) I tried this and below are my changes and result.

    I created a Utilities.js under data.js folder. Added this function:

    (function () {
        WinJS.Namespace.define("Converters", {
    
            ItemsInGroup: WinJS.Binding.converter(function (value) {
                var group = Data.resolveGroupReference(value);
                return "(" + Data.getItemsFromGroup(group).length + ")";
            })
        });
    })();

    Modified the template for groupeditems.HTML to replace the Chevron with items count: (Changed is in bold)

    <!-- These templates are used to display each item in the ListView declared below. -->
    
        <div class="headertemplate" 
    data-win-control="WinJS.Binding.Template">
            <button class="group-header 
    win-type-x-large win-type-interactive" 
    data-win-bind="groupKey: key"
                onclick="Application.navigator.pageControl.navigateToGroup(event.srcElement.groupKey)" 
    role="link" tabindex="-1" type="button">
                <span class="group-title win-type-ellipsis"
     data-win-bind="textContent: title"></span>
                <span class="group-chevron" 
    data-win-bind="textContent: key Converters.ItemsInGroup"></span>
            </button>
        </div>

    I hid the chevron in CSS (I will show the item count instead of the Chevron) :

    /*Comment out the Chevron code */
    
    /*.groupeditemspage .groupeditemslist .group-header .group-chevron::before {
                    content: "\E26B";
                    font-family: 'Segoe UI Symbol';
                }
    
                .groupeditemspage .groupeditemslist.win-rtl .group-header .group-chevron:before {
                    content: "\E26C";
                }*/

    That is it. Below is my result.. you can see the item count in the screen shot (within brackets):

    - Girija



    Tuesday, May 28, 2013 6:52 PM
  • This method works! Thank you for your big help Girija! ^^
    Wednesday, May 29, 2013 8:03 AM