editor & dataSource

by valchev

HTML

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

CSS

.km-custom {
  -webkit-mask-box-image: url("http://cdn1.iconfinder.com/data/icons/simplicio/32x32/file_edit.png");
}

JavaScript

var data = [
    { id: 1, foo: true },
    { id: 2, foo: true },
    { id: 3, foo: false },
    { id: 4, foo: false },
    { id: 5, foo: true }
];

var grid = $("#grid").kendoGrid({
    dataSource: {
        data: data,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: {type: "number"},
                    foo: {type: "boolean"}                  
                }
            }                
        }
    },
    columns: [
        "id", "foo",
        {
            template: '<a href="\\#" class="open-window">open window</a>'   
        }
   ],
   selectable: "single, row"  ,
    change: function(e) {
        debugger;
     e.preventDefault(); 
    }
}).data("kendoGrid");
    
$("#grid").on("click", ".open-window", function(e) {
    $(e.target).closest("tr").removeClass("k-state-selected");
    console.log("open");
});