Kendo UI Starter Template

An empty fiddle with the latest Kendo UI CSS and JS references.

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.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
<div id="grid"></div>



<!-- Kendo popup template -->
<script type="text/x-kendo-template" id="popup_editor">
    <p>This is a custom popup editor.</p>
    <div class="k-edit-label">
        <label for="column1">Column 1</label>
    </div>
    <div data-container-for="applies_to" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="applies_to" data-bind="value:column1" />
    </div>
    <div class="k-edit-label">
        <label for="file_location">Column 2</label>
    </div>
    <div data-container-for="file_location" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="file_location" data-bind="value:column2" />
    </div>
    <div class="k-edit-label">
        <label for="type_name">Column 3</label>
    </div>
    <div data-container-for="type_name" class="k-edit-field">
        <select data-bind="value:column3" id="column3" />
    </div>
    </script>

JavaScript

//Generic data for the grid
var grid_data = [{id:1,"column1":"test1","column2":"test5","column3":"test1"},
                {id:2,"column1":"test2","column2":"test4","column3":"test2"},
                {id:3,"column1":"test3","column2":"test3","column3":"test3"},
                {id:4,"column1":"test4","column2":"test2","column3":"test1"},
                {id:5,"column1":"test5","column2":"test1","column3":"test2"}];
//Generic data for column3 dropdown
var column3_data = ["test1", "test2","test3"];

//Creating Kendo Grid
$("#grid").kendoGrid({
    dataSource: new kendo.data.DataSource({
        data: grid_data,
        schema: {
            model: {
                id: "id",
                fields: {
                    column1: {
                        type: "string"
                    },
                    column2: {
                        type: "string"
                    },
                    column3: {
                        type: "string"
                    }
                }
            }
        }
    }),
    columns: [
        "column1", "column2", "column3", {
        command: ["edit", "destroy"],
        title: "&nbsp;"
    }],
    toolbar: ["create"],
    editable: {
        mode: "popup",
        template: kendo.template($("#popup_editor").html()),
        window: {
            title: "Custom Pop Up Editor"
        }
    },
    edit: function (e) {
        $("#column3").kendoDropDownList({
            dataSource: new kendo.data.DataSource({
                data: column3_data
            })
        });
    }

});