Disable selection and itemInvoke event for a particular item in the listview

windows-8, windows-runtime, winjs

Solution

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}

}

Problem

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).?

Original source