Grid

by Lars Holm Jensen

HTML

<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<script src="https://dl.dropboxusercontent.com/u/4472595/people.js"></script>
<!-- grid element -->
<div id="grid" style="width: 700px; margin: 0 auto;"></div>

<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
    <p>Custom editor template</p>
    <div class="k-edit-label">
        <label for="FirstName">First Name</label>
    </div>
    <!-- autoComplete editor for field: "FirstName" -->
    <input name="FirstName"
        data-bind="value:FirstName"
        data-value-field="firstName"
        data-text-field="firstName"
        data-source="autoCompleteDS"
        data-role="autocomplete" />
        
    <div class="k-edit-label">
        <label for="LastName" style="color: red;">Last Name</label>
    </div>
    <!-- textbox editor for field: "LastName" -->
    <!-- field: "LastName" is not included as a grid column -->
    <input type="text" class="k-input k-textbox" name="LastName" data-bind="value:LastName">
    
    <div class="k-edit-label">
        <label for="BirthDate">Birth Date</label>
    </div>
    <!-- datepicker editor for field: "BirthDate" -->
    <input type="text" 
        name="BirthDate" 
        data-type="date" 
        data-bind="value:BirthDate" 
        data-role="datepicker" />
        
    <div class="k-edit-label">
        <label for="HiredDate">Hired Date</label>
    </div>
    <!-- datepicker editor for field: "HiredDate" -->
    <input type="text" 
        name="HiredDate" 
        data-type="date" 
        data-bind="value:HiredDate" 
        data-role="datepicker" />
        
    <div class="k-edit-label">
        <label for="Age">Age</label>
    </div>
    <!-- numeric textbox editor for field: "Age" -->
   ...

JavaScript

var data = createRandomData(50);
var autoCompleteDS = new kendo.data.DataSource({
    data: [
        {firstName: "Alex"},
        {firstName: "Alice"},
        {firstName: "Antony"},
        {firstName: "Anne"},
        {firstName: "Anna"}
    ]
});

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            data: data,
            schema: {
                model: {
                    fields: {
                        FirstName: { type: "string" },
                        LastName: { type: "string" },
                        City: { type: "string" },
                        Title: { type: "string" },
                        BirthDate: { type: "date" },
                        HiredDate: { type: "date" },
                        Age: { type: "number" }
                    }
                }
            },
            pageSize: 10
        },
        height: 450,
        scrollable: true,
        sortable: true,
        pageable: true,
        editable: {
            mode: "popup",
            template: $("#popup_editor").html()
        },
        edit: function(e) {
            $(e.container)
                .find("input[name='FirstName']")
                    .data("kendoAutoComplete")
                        .bind("change", function(e) {
                            console.log("auto complete changed");
                        });
        },
        toolbar: ["create"],
        columns: [
            {
                field: "FirstName",
                title: "First Name",
                width: 100
            },
            {
                field: "BirthDate",
                title: "Birth Date",
                template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #'
            },
            {
                field: "HiredDate",
                title: "Hired",
                template: '#= kendo.toString(HiredDate,"MM/dd/yyyy") #'
            },
            {
                field: "Age",
                width: 100
       ...