How to create Semantic Zoom out display empty group data headers.

Question

I understand providing the data template to the ItemTemplate selector, but the items that I want to be displayed are not part of the data. For instance let's say you have the following list of children in the classroom:

1. Mark Anderson
2. Sara Buckingham
3. Dave Christy
4. Jeni Thompson.

and are using the first letter in the last name to organize the data. If I pass dataItems that represent the students (FirstName, LastName) to the groupedItemList

groupedItemList = itemList.createGrouped(
                function getGroupKey(dataItem) {
                    return dataItem.LastName.toUpperCase().charAt(0);

                },
                function getGroupData(dataItem) {
                    return {
                        Name: dataItem.LastName.toUpperCase().charAt(0)
                    };
                },
                function compareGroups(left, right) {
                    return left.toUpperCase().charCodeAt(0) - right.toUpperCase().charCodeAt(0);
                }
            ),

The semantic zoom out contains only the following letters A, B, C, T.

I would like a list of all the letters in the alphabet and then style them so that those letters that have no items get another visual treatment.

Answer 1

Hi,

I find a workaround which is to add some “dummy data”(which use A-Z in the title) in the data source list. These “dummy data” items are only used for generating the proper group. Then, we can use templating function (instead of static html based template) to produce different UI based on if the given item is a “dummy data item” or normal data item.

If I find any better way will let you know.

#ListView.itemTemplate property (Windows)

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

---

Roy
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Hi JohnWBan,

I have confirmed. Semantic Zoom must base on the datasource. So I think the workaround in the last reply maybe the best choice. And you may also refer to the follow example.

#HTML ListView grouping and SemanticZoom sample

http://code.msdn.microsoft.com/windowsapps/ListView-grouping-and-6d032cc1

---

Roy
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.