Kendo UI

jQuery + Kendo UI + MockJax

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>

<script id="row-template" type="text/x-kendo-template">
    <tr data-uid="${uid}">
        <td>#= City #</td>
        <td>#= State #</td>
        <td>#: kendo.toString(get("Population"), "n0") #</td>
    </tr>
</script>

JavaScript

var cities = [
    { "ID": 1, "City": "Sydney", "State": "NSW", "Population": 4627345 },
    { "ID": 2, "City": "Melbourne", "State": "VIC", "Population": 4137432 },
    { "ID": 3, "City": "Brisbane", "State": "QLD", "Population": 2074222 },
    { "ID": 4, "City": "Perth", "State": "WA", "Population": 1738807 },
    { "ID": 5, "City": "Adelaide", "State": "SA", "Population": 1212982 }
];

var dataSource = new kendo.data.DataSource({
    data: cities,
    schema: {
        model: {
            id: "ID", 
            fields: { 
                City: { editable: false }, 
                State: { editable: false }, 
                Population: { editable: true }
            } 
        }
     }
});
    
$("#grid").kendoGrid({
    columns: [
        { field: "City" },
        { field: "State" },
        { field: "Population" },
    ],
    dataSource: dataSource,
    rowTemplate: kendo.template($('#row-template').html()),
    editable: true 
});