k-grid checkbox icons buttons

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.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><input id="checkBoxID" type="checkbox"/></th>
           <th data-field="name">Name</th>
           <th data-field="age">Age</th>
           <th>Icons</th>
           <th>Commands</th>
       </tr>
   </thead>
</table>

<script id="actions_tmpl" type="text/x-kendo-tmpl">
    <div class="table_action chat_action"></div>
    <div class="table_action mail_action"></div>
    <div class="table_action edit_action"></div>
</script>

CSS

.chat_action, .mail_action, .edit_action {
    width: 15px;
    height: 15px;
    display: inline-block;
}

.chat_action {
    border: 1px solid red;
}

.mail_action {
    border: 1px solid green;
}

.edit_action {
    border: 1px solid blue;
}

JavaScript

var templCheckbox = kendo.template('<input class="checkbox" type="checkbox" />');


$("#grid").kendoGrid({
    dataSource: [
        {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22},
    {
        name: "John Doe",
        age: 22,
        }],
    columns: [
    {
        template: templCheckbox, width: "32px"},
    {
        field: "name",
        title: "Name",
        filterable: false,
        editable: true},
    {
        field: "age",
        filterable: false,
        sortable: false,

        },
    {
        template: kendo.template($("#actions_tmpl").html())},
    {
        command: ["edit", "destroy"], width: "195px" }        
    ]
});


$("#checkBoxID").change(function() {
   var isChecked = this.checked;
   $(".checkbox").attr("checked", isChecked)
});