Kendo UI MVVM and the Grid: Example 05

Binding an editable Grid to a ViewModel. Adding custom filtering to the grid.

by Andy

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.metro.min.css">
<script type="text/x-kendo-template" id="someTemplate">
    <div> 
        <label> ${firstName}</label>   
        <label>${lastName}</label> 
    </div>
</script>
<div id="body">
    inline template - this one works
    <div id="inlineTemplate">
        <div data-role="grid" data-bind="source: people" data-columns='[
            {"field": "firstName", 
             "title": "Full Name", 
             "template": 
             "<div><label>${firstName}</label><label>${lastName}</label></div>"}
        ]'></div>
    </div>

    External template - not working
     <div id="externalTemplate">
        <div data-role="grid" data-bind="source: people" data-columns='[
            {"field": "firstName", 
             "title": "Full Name", 
             "template": "kendo.template($(\"#someTemplate\"))"}]'></div>
    </div>
</div>

CSS

.toolbar-filter {
    float: right;
}

JavaScript

// Define a DataSource
var peopleDataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        firstName: "John",
        lastName: "DeVight",
        roleId: 2
    }, {
        id: 2,
        firstName: "Wendy",
        lastName: "Parry",
        roleId: 1
    }]
});

// Create an observable object.
var vm = kendo.observable({
    people: peopleDataSource,
});

kendo.bind($("#body"), vm);