Getting windows-8 semantic zoom out to include empty items

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

After spent some time trying to find the solution to the same problem, I have have found a solution and posted it on gist.

https://gist.github.com/pimpreneil/4714483

Hope it is clear enough.