kendo listview and template

by lhoeppner

HTML

<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<div id="listView"></div>
<br />
<div id="display">
    
</div>
<script id="template" type="text/x-kendo-template">
    <div class="display">
        <p> #= Job #</p>
        <p> #= Person.Name #</p>
    </div>
</script>

CSS

#listView {
    width: 100px;
    margin: 0 auto;
}

JavaScript

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            //using jsfiddle echo service to simulate JSON endpoint
            url: "/echo/json/",
            dataType: "json",
            type: "POST",
            data: {
                // /echo/json/ echoes the JSON which you pass as an argument
                json: JSON.stringify([{
                    "Id": "1",
                        "People": [{
                        "Person": {
                            "Name": "Jon"
                        },
                            "Job": "IT Guy"
                    }]
                }, {
                    "Id": "2",
                        "People": [{
                        "Person": {
                            "Name": "Kate"
                        },
                            "Job": "Web Developer"
                    }]
                }, {
                    "Id": "3",
                        "People": [{
                        "Person": {
                            "Name": "Martin"
                        },
                            "Job": "Web Developer"
                    }]
                }, {
                    "Id": "4",
                        "People": [{
                        "Person": {
                            "Name": "Martin"
                        },
                            "Job": "Web Developer"
                    }]
                }])
            }
        }
    }
});

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

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

var listView = $("#listView").kendoListView({
    dataSource: dataSource,
    template: "<div style='padding: 10px; border: 1px solid red;'>#= Id #...