Kendo UI MVVM and the Grid: Example 05

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

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="trip">
    <div class="k-toolbar k-grid-toolbar">
        <a class="k-button k-button-icontext k-grid-add" href="#">
            <span class="k-icon k-add"></span>
            Add Trip
        </a>
        <div class="toolbar-filter">
            Filter: 
            <select data-role="dropdownlist" data-bind="source: roles, value: currentStatus" 
                    data-select="filterStatus" data-text-field="name" data-value-field="id" 
                    data-option-label="Select a Status">
            </select>
            <button data-bind="click: filterStatus" class="k-button">Go</button>
        </div>
    </div>
    <div data-role="grid" 
         data-bind="source: trip" 
         data-editable="true" 
         data-filterable="true"
         data-columns='[{"field": "Name", "title": "Name"}, 
                        {"field": "Status", "title": "Status", "template": "#= parent().parent().getStatusName(Status) #"},
                        {"command": "update", "title": " ", "width": "110px"}]'>
    </div>
</div>

<script type="text/x-kendo-template" id="toolbar-template">
    <a class="k-button k-button-icontext k-grid-add" href="\#"><span class="k-icon k-add"></span>Add new record</a>
</script>

CSS

.toolbar-filter {
    float: right;
}

JavaScript

var Trip = kendo.data.Model.define({
    fields: {
        "Name": {
            type: "string"
        },
        "Status": {
            type: "number"                
        }
    }    
});

// Define a DataSource
var tripDataSource = new kendo.data.DataSource({
    data: [
        { id: 1, Name: "Jamaica", Status: 2 },
        { id: 2, Name: "Tahiti", Status: 1 }
    ],
    schema: {
        model: Trip
    }
});

tripDataSource.bind("change", function(e) {
    if (e.action === "itemchange") {
        if (e.field === "Name" ) {
            e.items[0].dirty = true;
        }
    }
});

// An observable object
var vm = kendo.observable({
    trip: tripDataSource,
    Status: [
    {
        id: 0,
        name: "Inactive"},
    {
        id: 1,
        name: "Active"},
    {
        id: 2,
        name: "Cancelled"}
    ],
    getStatusName: function(Status) {
        var statusName = "";
        $.each(this.Status, function(idx, Status) {
            if (Status.id == Status) {
                statusName = Status.name;
                return false;
            }
        });
        return statusName;
    },
    currentStatus: 0,
    filterStatus: function() {
        if (this.currentStatus== 0) {
            this.trip.query();
        } else {
            this.trip.filter({ field: "Status", operator: "eq", value: this.currentStatus});
        }
    }
});

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

var statusEditor = 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.Status
            },
            dataTextField: "name",
            dataValueField: "id"
        });
};

var grid = $("div[data-role='grid']").data("kendoGrid");
$.each(grid.columns, function(idx, column) {
    if (column.field == "Status") {
        column.editor = statusEditor;
       ...