Empty

HTML

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

JavaScript

var products = [
{
    "ProductID": 6,
    "ProductName": "Grandma's Boysenberry Spread",
    "Category": { CategoryName: "Condiments", CategoryID: 2 },
    "UnitPrice": "25.00"
}];

var categories = [
    { CategoryName: "Beverages", CategoryID: 1 }, 
    { CategoryName: "Condiments", CategoryID: 2 }, 
    { CategoryName: "Confections", CategoryID: 3 }, 
];

$(document).ready(function() {
    var dataSource = new kendo.data.DataSource({
        pageSize: 30,
        data: products,
        schema: {
            model: {
                id: "ProductID",
                fields: {
                    ProductID: {
                        editable: false,
                        nullable: true
                    },
                    ProductName: {
                        validation: {
                            required: true
                        }
                    },
                    Category: { defaultValue: { CategoryName: "Confections", CategoryID: 3 } },
                    UnitPrice: {
                        type: "number",
                        validation: {
                            required: true,
                            min: 1
                        }
                    }
                }
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 260,
        toolbar: ["create"],
        columns: [
            "ProductName",
        {
            field: "Category",
            template: "#=Category.CategoryName#",
            width: "150px",
            editor: categoryDropDownEditor},
        {
            field: "UnitPrice",
            format: "{0:c}",
            width: "150px"},
        {
            command: "edit",
            title: " ",
            width: "110px"}],
        editable: "inline"
    });
});

function categoryDropDownEditor(container, options) {
    $('<input data-text-field="CategoryName" data-value-field="CategoryID"...