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

  • 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.

    Monday, January 21, 2013 5:49 PM


All replies