How can I disable an item in a Kendo ListView?

Question

I'm trying to disable an item in my Kendo listview control. I've tried calling

$('#itemid').prop('disabled', true);

but it had no effect (it's a div, not an input). I don't want the user to be able to click on this item. I also tried getting the click event handlers and temporarily setting them aside, thus disabling the control.

$('#itemid').data('events')

... is supposed to give me the events, but it returns nothing. How can I disable the item in the listview?

Answer 1

This isn't really supported by Kendo UI at the moment. The selection is cleared in the Selectable's _tap method. You can hack something together by overriding kendoSelectable's _tap method, e.g.:

kendo.ui.Selectable.fn._myTap = kendo.ui.Selectable.fn._tap;
kendo.ui.Selectable.fn._tap =  function(e) {
    if ($(e.target).hasClass("my-disabled-item")) {
        return;
    }

    this._myTap(e);
}

and adding a disableItem method to ListView:

kendo.ui.ListView.fn.disableItem =  function(elem) {
    $(elem).addClass("my-disabled-item");
}

See a demo which has the first two items disabled here: http://jsfiddle.net/lhoeppner/vP2L9/

Note that all of this might break with upgrades (there's no guarantee Telerik will keep this code in the _tap method).