Question

I have a listview. By default, all items have itemInvoke and single-selection enabled. But now, I would like to disable selection and itemInvoke (both event and animation) for one particular item with id “disableMe”. Is there a way to do it? Or is it possible to disable the event for the whole group (not the whole listview).?

Answer 1

Answering my own question because I happened to figure it out today. Please advice if you have better solution for this issue.

In Metro Style Application, selection in ListView control can usually be triggered by Right-Click with mouse or by a small ‘drag’/’swipe’ with touch. To disable touch selection, you need to overwrite the MSPointerDown event handler for that particular item. To disable ‘Right-Click’ selection, you need to overwrite the oncontextmenu event for that particular item.

If you are creating itemTemplate in Javascript:

function listViewItemTemplate(item) {
    // data has boolean properties called 'doNotSelectMe' and 'doNotInvokeMe'
    var data = item.data._value;

    var itemElement = document.createElement('div');
    var itemElement.id = 'testElement';

    if (data.doNotSelectMe) {
        // disable mouse selection
        itemElement.oncontextmenu = function (e) { e.stopPropagation(); };
        // disable touch selection
        itemElement.addEventListener('MSPointerDown', function (e) {
                                          e.stopPropagation();
                                     });
    }

    if (data.doNotInvokeMe) {
        //disable item invoke event
        itemElement.onclick = function (e) { e.stopPropagation(); };
    }

    return {element: itemElement}

}