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>
  <div id="grid"></div>
  
   <script type="text/x-kendo-template" id="template">
     <div class='employee-details'>
        <ul>
           <li><label>Country:</label>#= Country #</li>
           <li><label>City:</label>#= City #</li>
           <li><label>Address:</label>#= Address #</li>
           <li><label>Home Phone:</label>#= HomePhone #</li>
        </ul>
     </div>
   </script>
  
</body>
</html>
​
 
$("#grid").kendoGrid({
  dataSource: {
    type: "odata",
    transport: {
      read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
    },
    pageSize: 5,
    serverPaging: true,
    serverSorting: true
  },
  height: 450,
  sortable: true,
  pageable: true,
  detailTemplate: kendo.template($("#template").html()),
  dataBound: function() {
    var index = $("th:contains(Last Name)").index();
       
    $("#grid .k-hierarchy-cell, #grid .k-hierarchy-col").each(function() {
      $(this).insertBefore($(this).siblings().eq(index));
    });
      
  },
  columns: [
    {
      field: "FirstName",
      title: "First Name"
    },
    {
      field: "LastName",
      title: "Last Name"
    },
    {
      field: "Country"
    }
  ]
});
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers