First working version of a semantic zoom with the full alphabet and disabled letters

gistfile1.js

// Sorts the groups.
function compareGroups(leftKey, rightKey) {
    return leftKey.toString().charAt(0).charCodeAt(0) - rightKey.toString().charAt(0).charCodeAt(0);
}

// Returns the group key that an item belongs to.
function getGroupKey(dataItem) {
    return dataItem.label.toString().charAt(0);
}

// Returns the title for a group.
function getGroupData(dataItem) {
    return {
        label: dataItem.label.toString().charAt(0),
        disabled: dataItem.disabled
    }
}

/* We create the headers group */
var alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var headers = [];
var curLetter = 0;

// We fill in the headers array with the letters repeated as many time as there are occurences of them in the array (to keep the ponderation)
arrayToIterateThrough.forEach(function (item) {
    var letter = item.label.toString().charAt(0);
    headers.push({ 'label': letter });
    alphabet = alphabet.replace(letter, '');
});

// For all the letters that are not included in the array, we add them with a disabled attribute
for (var k = 0; k < alphabet.length; k++) {
    headers.push({ 'label': alphabet.charAt(k), 'disabled':true })
}

// Original grouped list
var guidesList = new WinJS.Binding.List(arrayToIterateThrough);
var groupedDataList = guidesList.createGrouped(getGroupKey, getGroupData, compareGroups);

// Special grouped list for the headers
var headers = new WinJS.Binding.List(headers);
var groupedHeaders = headers.createGrouped(getGroupKey, getGroupData, compareGroups);

// We tweak the groups header's parameters not to take into account the empty items
// To do so, we set the empty groups with a group size of 0 (instead of 1) and we set their firtItemIndex to the previous letter's one
for(var k = 'A'.charCodeAt(0); k <= 'Z'.charCodeAt(0); k++) {
    var letter = String.fromCharCode(k);
    var originalListItem = groupedDataList.groups._groupItems[letter];
    if (originalListItem) {
        groupedHeaders.groups._groupItems[letter].firstItemIndexHint = originalListItem.firstItemIndexHint;
    } else {
        groupedHeaders.groups._groupItems[letter].groupSize = 0;
        if (k != 'A'.charCodeAt(0)) {
            var previousLetter = String.fromCharCode(k - 1);
            var originalPreviousLetter = groupedDataList.groups._groupItems[previousLetter];
            if (originalPreviousLetter) {
                groupedHeaders.groups._groupItems[letter].firstItemIndexHint = originalPreviousLetter.firstItemIndexHint;
                groupedHeaders.groups._groupItems[letter].firstItemKey = originalPreviousLetter.firstItemKey;
            } else {
                groupedHeaders.groups._groupItems[letter].firstItemIndexHint = groupedHeaders.groups._groupItems[previousLetter].firstItemIndexHint;
                groupedHeaders.groups._groupItems[letter].firstItemKey = groupedHeaders.groups._groupItems[previousLetter].firstItemKey;
            }
        }
    }
}

// And finally we create the semantic zoom 
zoomedOutListView = new WinJS.UI.ListView(document.getElementById("zoomedOutListView"), {
    itemDataSource: groupedHeaders.groups.dataSource,
    itemTemplate: function (itemPromise, a2) {
        var returnValue = document.getElementById("semanticZoomTemplate").renderItem(itemPromise, a2);

        // If the letter is "disabled", we apply a class to it for the css
        if (itemPromise._value.data.disabled) {
            WinJS.Utilities.addClass(returnValue.element._value, "disabled");
        }

        return returnValue;
    }
});

zoomedInListView = new WinJS.UI.ListView(document.getElementById("zoomedInListView"), {
    itemDataSource: groupedDataList.dataSource,
    groupDataSource: groupedDataList.groups.dataSource,
    groupHeaderTemplate: document.getElementById("headerTemplate")
    itemTemplate: document.getElementById("itemTemplate")
});

semanticZoomView = new WinJS.UI.SemanticZoom(document.getElementById("guide_list_view"));