Column template

by OnaBai

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div id="grid"></div>
<script id="status-template" type="text/kendo-templ">
     # if (data.status === 1) { #
         <span style="color: red;">Status 1</span>
     # } else if (data.status === 2) { #
         <span style="color: yellow;">Status 2</span>
     # } else { #
         <span style="color: green;">Status 3</span>
     # } #
 </script>

CSS

#grid {
    width : 490px;
}

JavaScript

$("#grid").kendoGrid({
    dataSource: {
        data: [
            { proccess: "p1", status: 1, comment: "c1" },
            { proccess: "p2", status: 2, comment: "c2" },
            { proccess: "p3", status: 3, comment: "c3" },
        ],
        pageSize: 20
    },
    height: 550,
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [{
        field: "proccess",
        title: "Contact Name",
        width: 200
    }, {
        field: "status",
        title: "status",
        template: $("#status-template").html()
    }, {
        field: "comment",
        title: "comment"
    }]
});