kendo Grid with images and click event

by manoj

HTML

<script src="http://cdn.kendostatic.com/2013.1.319/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<div id="grid"></div>
<script>
    function sayHello() {
        alert("Hello");
    }
</script>

CSS

img {
    width: 32px;
    height: 32px
}

JavaScript

var data = [
    { id: 1, name: "name_1", status: true, image: "1.png"},
    { id: 2, name: "name_2", status: true, image: "2.png" },
    { id: 3, name: "name_3", status: false, image: "3.png" },
    { id: 4, name: "name_4", status: true, image: "4.png" },
    { id: 5, name: "name_5", status: false, image: "5.png" }
];
var cols = [
    { field: "name" },
    {
        title   : "",
        template: "<img src='http://www.onabai.es/images/digits/9.png'/>"
    },
    {
        title   : "",
        template: "# if (status) { # <img onclick='javascript: sayHello()'; src='http://www.onabai.es/images/digits/0.png'/> # } else { # <img onclick='javascript: sayHello()'; src='http://www.onabai.es/images/digits/1.png'/> # } #"
    },
    {
        title   : "",
        template: "<img class='ob-image' src='http://www.onabai.es/images/digits/#= image #'/>"
    }
];
$("#grid").kendoGrid({
    columns   : cols,
    dataSource: data,
    schema    : {
        model: {
            id: "ID"
        }
    }
}).data("kendoGrid");

$("#grid").on("click", ".ob-image", function() {
    alert("Hi");
});