grid-row-template editing

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.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<table id="grid">
<thead><tr><th>CostCategoryAbv</th></tr></thead>
<tbody>
  <td></td>
</tbody>
</div>
<br />
<input type="button" value="Save Row" onclick="save();" />

<script id="gridItemsRowTemplate" type="text/x-kendo-template">
    <tr data-uid="#= uid #">
        <td>
            #= CostCategoryAbv #
        </td>        
    </tr>
    <tr data-uid="#= uid #">
    	<td>
            #= VendorName #
        </td>
    </tr>
</script>

JavaScript

var records = [{"foo": 1,"CostCategoryAbv":"1CostCategoryAbv", "VendorName": "1VendorName"},
    {"foo": 2,"CostCategoryAbv":"2CostCategoryAbv", "VendorName": "2VendorName"},
    {"foo": 3,"CostCategoryAbv":"3CostCategoryAbv", "VendorName": "3VendorName"},
    {"foo": 4,"CostCategoryAbv":"4CostCategoryAbv", "VendorName": "4VendorName"},
    {"foo": 5,"CostCategoryAbv":"5CostCategoryAbv", "VendorName": "5VendorName"}];

var dataSource = new kendo.data.DataSource({
    data: records,
    schema: {
        model: {
            id: "foo",
            fields: {
                foo: {type: "number"},
                CostCategoryAbv: {type: "string"},
                VendorName: {type: "string"}
            }
        }            
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,

    editable: "inline",
    selectable: "row",
    scrollable: true,
    pageable: false,
    sortable: true,
    filterable: false,
    navigatable: true,
    rowTemplate: kendo.template($("#gridItemsRowTemplate").html()),
    dataBound: function() {
        $("#grid tbody td").on("click", function(e) {
                $("#grid").data("kendoGrid").editCell($(this));
            
        });
    }
});

function save() {
    var row = $("#grid tbody").find(".k-grid-edit-row");
    if(row.length == 1) {
        $("#grid").data("kendoGrid").saveRow(row);
    }
}