kendo command via template

by valchev

HTML

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

<script id="command-template" type="text/x-kendo-template">
    <a class="k-button k-button-icontext k-grid-edit" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
    # if(foo % 2 == 0) { #
        <a class="k-button k-grid-even">Even</a>
    # } else { #
        <a class="k-button k-grid-odd">Odd</a>
    # } #
</script>

JavaScript

var data = [
    { foo: 1, bar: "bar1"},
    { foo: 2, bar: "bar2"},
    { foo: 3, bar: "bar3"},
    { foo: 4, bar: "bar4"},
    { foo: 5, bar: "bar5"}
];

$("#grid").kendoGrid({
    dataSource: {
        data: data,
        schema: {
            model: {
                id: "foo",
                fields: {
                    foo: {
                        type: "number"
                    },
                    bar: {
                        type: "string"
                    }
                }
            }
        }
    },
    columns: [
        "foo",
        "bar",
        {
            template: kendo.template($("#command-template").html())
        }
    ],
    editable: "inline",
    edit: function(e) {
        var commandCell = e.container.find("td:last"); //find the command column
        commandCell.html('<a class="k-button k-button-icontext k-grid-update" href="#"><span class="k-icon k-update"></span>Update</a><a class="k-button k-button-icontext k-grid-cancel" href="#"><span class="k-icon k-cancel"></span>Cancel</a>'); //append the buttons
    }
});

$("#grid").on("click", ".k-grid-even", function() {
   alert("click even command") 
});
    
$("#grid").on("click", ".k-grid-odd", function() {
   alert("click odd command") 
});