Kendo UI Grid

Local data, mobile scrolling.

by Chris Ward

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="grid"></div>
<h4>Change = <span id="grid-change"></span></h4>

JavaScript

$(document).ready(function () {

        var traderListDataSource = new kendo.data.DataSource({
            data: [{
                userName: "Fred",
                url: "user.webapi.url/Fred"
            }, {
                userName: "Bert",
                url: "user.webapi.url/Bert"
            }, {
                userName: "Frank",
                url: "user.webapi.url/Frank"
            }, {
                userName: "Ginger",
                url: "user.webapi.url/Ginger"
            }],
            schema: {
                model: {
                    id: "url",
                    fields: {
                        url: {
                            type: "string"
                        },
                        userName: {
                            type: "string"
                        }
                    }
                }
            }
        });

        function userNameComboBoxEditor(container, options) {
            $('<input required data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoComboBox({
                dataSource: traderListDataSource,
                dataTextField: "userName",
                dataValueField: "userUrl"
            });
        }

        function userNameAutoCompleteEditor(container, options) {
            $('<input required data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoAutoComplete({
                dataSource: traderListDataSource,
                dataTextField: "userName",
                filter: "contains",
                minLength: 1
            });
        }

        var gridDataSource = new kendo.data.DataSource({
            data: [{
                userName: "Fred",
                userUrl: "user.webapi.url/Fred",
                productName: "ProductA",
                productUrl: "product.webapi.url/ProductA",
                amount: 123
            }, {
                userName: "Bert",
     ...