Kendo UI Web Grid

A simple example showing how to use the DataSource with a Grid widget.

by jbristowe

HTML

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

JavaScript

var kendoGridUsers = [
    {
    'id': 100,
    'firstName': 'John',
    'surname': 'Bristowe',
    'gender': 'Male'},
{
    'id': 101,
    'firstName': 'Todd',
    'surname': 'Anglin',
    'gender': 'Male'},
{
    'id': 102,
    'firstName': 'Burke',
    'surname': 'Holland',
    'gender': 'Male'}
];

var dataSource = new kendo.data.DataSource({
    data: kendoGridUsers,
    batch: true,
    pageSize: 30,
    schema: {
        model: {
            id: 'id',
            fields: {
                id: {
                    editable: false,
                    nullable: true
                },
                firstName: {
                    type: 'string',
                    validation: {
                        required: true
                    }
                },
                surname: {
                    type: 'string',
                    validation: {
                        required: true
                    }
                },
                gender: {
                    type: 'string',
                    validation: {
                        required: true
                    }
                }
            }
        }
    }
});

$('#kendoGrid').kendoGrid({
    dataSource: dataSource,
    scrollable: true,
    sortable: true,
    pageable: true,
    toolbar: ['create', 'save', 'cancel'],
    columns: [
        {
        field: 'id',
        title: 'ID',
        width: '10%'},
    {
        field: 'firstName',
        title: 'First Name',
        width: '30%'},
    {
        field: 'surname',
        title: 'Surname',
        width: '30%'},
    {
        field: 'gender',
        title: 'Gender',
        width: '30%'}
    ],
    editable: true
});