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>
    <title>KendoUI Test Page</title>
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>         
    <script src = "http://demos.kendoui.com/content/shared/js/people.js"></script>
  </head>
  <body>
    
    <div id="grid"></div>
    <script>
      var grid = $("#grid").kendoGrid({
        dataSource: {
          data    : createRandomData(300),
          pageSize: 10,
          schema  : {
            id   : "Id",
            model: {
              fields: {
                FirstName: { type: 'string' },
                LastName : { type: 'string' },
                City :{type:'string'},
                BirthDate :{type:'string'}
              }
            }
          }
        },
        selectable: 'cell',
        editable  : false,
        pageable  : {
          refresh  : true,
          pageSizes: true
        },
        columns   : [
          { field: "FirstName", width: 90, title: "First Name" },
          { field: "LastName", width: 90, title: "Last Name" },
          {field: "City"},
          {field: "BirthDate"}
          
        ]
      }).data("kendoGrid");
      
      $(grid.tbody).on("click", "td", function (e) {
        var row = $(this).closest("tr");
        var rowIdx = $("tr", grid.tbody).index(row);
        var colIdx = $("td", row).index(this);
        debugger;
        var colName = $('#grid').find('th').eq(colIdx).text()
        console.log("Selected cell on row: " + rowIdx +" and column name: " + colName);
      });
    </script>
    
    
    
    
  </body>
</html>
 
​
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers