Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <script type="text/x-kendo-template" id="rowTemp" >
                      
<tr id="tr_#= id #" >
    <td>#= id #</td>
    <td>#= simbol #</td>
                                  
      <td><input type="checkbox" name="add_#= id #" value="#= id #" id="add_#= id #" class="add" #= add ? 'checked="checked"' : '' #  /></td>
                      
    <td align="center"><input type="button" class="info  k-button k-button-icontext" name="info" onclick="myFunction();" value="Info" id="info_#= id #" style="height: 26px; margin: 0px 2px; min-width: 64px;"  /></td>
  
</tr>
</script>
  <div id="grid"></div>
</body>
</html>
​
 
var data = [{id: 1, simbol: "!", add: false, info: " "},{id: 2, simbol: "?", add: true, info: " "}];
​
$("#grid").kendoGrid({
    dataSource: {
        data: data,
        schema: {
            model: {
                id: 'id',
                fields:{
                    id: { type:"number"},
                    simbol: {type:"string" },
                    add:{type:"boolean"} ,                      
                    info:{type:"string"}                    
                }
            }
        }
    },
    columns: [{
                     field: "add",
                     template:'<input type="checkbox" name="add_#= id #" value="#= id #" id="add_#= id #" class="add"  />',
                    title: "Add"
                     },                     
                      { 
                 field:"info", 
                  template: '<input type="button" class="info  k-button k-button-icontext" name="info" value="Info" id="info_#= id #" style="height: 26px; margin: 0px 2px; min-width: 64px;" />',
                  title: " "                       
                  }],
                  rowTemplate: kendo.template($("#rowTemp").html())
});
​
function myFunction() {
     $('<div id="info_win">Some content</div>').appendTo(document.body);      
     $("#info_win").kendoWindow({ 
         title: "Info",
         modal: false,
         resizable: true,
         visible: false,
         width:300,
         close: function(w) {
             setTimeout(function(){
                 $('#info_win').kendoWindow('destroy');
             }, 200);
         }
     }).data("kendoWindow").center().open();
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers