chrome bug kendo remote data
by johnjohn
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>
<div id="grid"></div>
CSS
.km-touch-scrollbar
{
position: absolute;
visibility: hidden;
z-index: 200000;
height: .3em;
width: .3em;
background-color: #333;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
opacity: 0;
-moz-border-radius: .4em;
-webkit-border-radius: .4em;
border-radius: .4em;
}
.km-vertical-scrollbar
{
height: 100%;
right: 1px;
top: 0;
}
.km-horizontal-scrollbar
{
width: 100%;
left: 0;
bottom: 1px;
}
.km-scroll-container
{
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#bttnAdd, #bttnRefreshGrid
{
margin: 10px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
JavaScript
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
}
},
height: 280,
selectable: "Multiple, row",
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "OrderID", title: "Order ID", width: 100 },
{ field: "CustomerID", title: "Customer ID", width: 130},
{ field: "ShipName", title:"Ship Name", width: 200 },
{ field: "ShipAddress", title:"Ship Address", width: 200 },
{ field: "ShipCity", title:"Ship City", width: 150 },
{ field: "ShipCountry", title:"Ship Country", width: 150 }
]
});
});