kendo command button click

by JQ Purfect

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">
    # if(foo % 2 == 0) { #
        <a class="k-button k-grid-even" id='#= id#'>Even</a>
    # } else { #
        <a class="k-button print" id='#= id#'>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())
        }
    ]
});

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