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/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
<!--   <div class="box">111</div>
   -->          
  <div id="example" class="k-content">
            <div id="clientsDb">
​
                <div id="grid" style="height: 365px"></div>
​
            </div>
​
</body>
</html>
 
.k-grid-content{
  min-height:300px;
}
 
  var resizeGrid = function() {
  var viewportHeight = $(window).height();
    $(".k-grid-content").height(viewportHeight-200);
  };
​
​
  $(window).resize(function() {
    resizeGrid();
  });
​
  $(document).ready(function() {
    $(window).trigger("resize");
//     $(window).load(function(){
//       resizeGrid();
​
//     });
    
    
    $("#grid").kendoGrid({
      dataSource: {
        type: "odata",
        transport: {
          read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        },
        pageSize: 10
      },
      dataBound: function(e) {
        resizeGrid();
      },
      groupable: true,
      sortable: true,
      pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
      },
      columns: [{
        field: "ContactName",
        title: "Contact Name",
        width: 200
      }, {
        field: "ContactTitle",
        title: "Contact Title",
        width: 250
      }, {
        field: "CompanyName",
        title: "Company Name"
      }, {
        field: "Country",
        width: 150
      }]
    });
    
    
  });
​
​
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers