Kendo ui grid filter data source using mvvm

Question

I want to build the kendo grid only using the declarative statements instead of js.

I also want to apply the "filter" through the datasource in declarative statements itself. Possiblly if there is an option available in the data-bind property of the kendo grid.

Kindly help with a jsfiddle

Answer 1

Here is the jsFiddle DEMO illustrating use of Kendo grid with filtering using MVVM.

Below is the code snippet from the demo:

HTML:

<div data-role="grid"
                 data-filterable="true"            
                 data-editable="true"
                 data-toolbar="['create', 'save']"
                 data-columns="[
                                 { 'field': 'ProductName', 'width': 270 },
                                 { 'field': 'UnitPrice' },
                              ]"
                 data-bind="source: products,
                            visible: isVisible,
                            events: {
                              save: onSave
                            }"
                 style="height: 200px"></div>

JS:

var viewModel = kendo.observable({
        isVisible: true,
        onSave: function(e) {
            kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
        },
        products: new kendo.data.DataSource({
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" }
                    }
                }
            },
            batch: true,
            transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/products",
                    dataType: "jsonp"
                },
                update: {
                    url: "https://demos.telerik.com/kendo-ui/service/products/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "https://demos.telerik.com/kendo-ui/service/products/create",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            }
        })
    });
    kendo.bind($("#example"), viewModel);