Kendo UI MVVM and the Grid: Example 05

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

by stratdaz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="people">
    <div data-role="grid" 
         data-bind="source: people" 
         data-editable="popup" 
         data-filterable="true"
         data-columns='[{"field": "firstName", "title": "First Name"}, 
                        {"field": "lastName", "title": "Last Name"}, 
                        {"field": "roleId", "title": "Role", "template": "#= parent().parent().getRoleName(roleId) #"},
                        {"command": "edit", "title": " ", "width": "110px"}]'>
    </div>
</div>

JavaScript

var Person = kendo.data.Model.define({
    fields: {
        "firstName": {
            type: "string"
        },
        "lastName": {
            type: "string"
        },
        "roleId": {
            type: "number"                
        }
    }
});

// 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 }
    ],
    schema: {
        model: Person
    }
});

// Create an observable object.
var vm = kendo.observable({
    people: peopleDataSource,
    roles: [
    {
        id: 1,
        name: "CEO"},
    {
        id: 2,
        name: "Developer"},
    {
        id: 3,
        name: "Tester"}
    ],
    getRoleName: function(roleId) {
        var roleName = "";
        $.each(this.roles, function(idx, role) {
            if (role.id == roleId) {
                roleName = role.name;
                return false;
            }
        });
        return roleName;
    },
    currentRoleId: 0
});

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

var roleEditor = function(container, options) {
    $("<input name='" + options.field + "' data-text-field='name' data-value-field='id' data-bind='value:" + options.field + "'/>")    
        .appendTo(container)
        .kendoDropDownList({
            dataSource: {
                data: vm.roles
            },
            dataTextField: "name",
            dataValueField: "id"
        });
};

var grid = $("div[data-role='grid']").data("kendoGrid");
$.each(grid.columns, function(idx, column) {
    if (column.field == "roleId") {
        column.editor = roleEditor;
        return false;
    }
});