Sample Kendo Grid

This is simple demo for kendo grid.

by asifmohammed

HTML

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

JavaScript

var dataItems = [{
    Name: "Viswanath",
    ID: "1"},
{
    Name: "Syed Safiullah",
    ID: "2"},
{
    Name: "Parimala Selvakumar",
    ID: "3"}
];

/*
Note:
Actually, We will get dataItems from the $.ajax() call function in our application.

For Example:
.
.
$.ajax({
  async: false,
  type: "POST",
  url: "SamplePage.aspx/returnTable",
  .
  .
  .
  dataType: "json", 
  success: function (data, textStatus, jqXHR) {
     if (data != null) {
       var finalValue = $.parseJSON(data.d);
       $.each(finalValue, function (index, value) {
          dataItems.push({
            ID: value.ID,
            Name: value.Name
          });
       });
  }
}); 
*/

$("#grid").kendoGrid({
    dataSource: {
        data: dataItems
    },
    columns: [{
        field: "ID",
        width: 12,
        title: "S.No"},
    {
        width: 50,
        field: "Name"}]
});