Empty

by shiva_wahi

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.web.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1407/js/jquery.min.js"></script>
<div id="grid" />

JavaScript

var viewModel = kendo.observable({
            gridSource: [
                            { FirstName: "Shiva", LastName: "Wahi", CityName: "Noida", Title: "Module Lead", BirthDate: "10/29/1984", Age: 27 },
                            { FirstName: "Priya", LastName: "Srivastava", CityName: "Delhi", Title: "Tech Lead", BirthDate: "08/19/1982", Age: 30 }
                        ]
        });

        var cityDataSource = [{ CityID: 1, CityName: 'Delhi' }, { CityID: 2, CityName: 'Noida'}]

        function cityDropDownEditor(container, options) {
            $('<input data-text-field="CityName" data-value-field="CityName" data-bind="value:' + options.field + '" />')
                        .appendTo(container)
                        .kendoDropDownList({
                            autoBind: false,
                            dataSource: cityDataSource
                        });
                    }

        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                pageSize: 30,
                data: viewModel.gridSource,
                autoSync: true,
                schema: {
                    model: {
                        fields: {
                            FirstName: { type: "string" },
                            LastName: { type: "string" },
                            CityName: "CityName",
                            Title: { type: "string" },
                            BirthDate: { type: "date" },
                            Age: { type: "number" }
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                pageable: true,
                editable: true,
                height: 260,
                toolbar: ["create"],
                columns: [
                            {
                                field: "FirstName",
                                title: "First Name",
            ...