Kendo UI

jQuery + Kendo UI

by bartfukkink

HTML

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

JavaScript

var products = [
    {
    "ProductID": 1,
    "ProductName": "Chai",
    "Category": "Beverages",
    "UnitPrice": "18.00"},
{
    "ProductID": 2,
    "ProductName": "Chang",
    "Category": "Beverages",
    "UnitPrice": "19.00"},
{
    "ProductID": 3,
    "ProductName": "Aniseed Syrup",
    "Category": "Condiments",
    "UnitPrice": "10.00"},
{
    "ProductID": 4,
    "ProductName": "Chef Anton's Cajun Seasoning",
    "Category": "Condiments",
    "UnitPrice": "22.00"},
{
    "ProductID": 5,
    "ProductName": "Chef Anton's Gumbo Mix",
    "Category": "Condiments",
    "UnitPrice": "21.35"},
{
    "ProductID": 6,
    "ProductName": "Grandma's Boysenberry Spread",
    "Category": "Condiments",
    "UnitPrice": "25.00"}];

function CreateKendoGrids(grid) {
    var dsschema = {
        model: {
            id: "test",
            fields: {
                ProductID: {
                    type: "Number",
                    editable: false
                },
                ProductName: {
                    type: "String",
                },
                UnitPrice: {
                    type: "Number"
                }
            }
        }
    };

    var ds = new kendo.data.DataSource({
        pageSize: 30,
        data: products,
        schema: dsschema,
    });

    //console.log( ds );
    $(grid).kendoGrid({
        dataSource: ds,
        columns: [
            {
            field: "ProductID",
            title: "Product Id"},
        {
            field: "ProductName",
            title: "Product Name"},
        {
            field: "UnitPrice",
            title: "Price"},
        {
            command: "edit",
            title: "Commands"}
        ],
        editable: "popup",
    });
}

CreateKendoGrids("#grid");