refer to:http://dojo.telerik.com/ewis
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/column-resizing">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.903/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.web.min.js"></script>
<style>
html,
body
{
margin: 0;
padding: 0;
}
#grid,
#grid .k-grid-header
{
width: 100%;
border-width: 0;
padding: 0 !important;
}
#grid .k-grid-header
{
position: fixed;
top: 0;
z-index: 2;
}
#grid > .k-grid-content
{
overflow: visible !important;
}
#grid > .k-grid-pager
{
padding-left: 0;
}
#grid .k-pager-first
{
margin-left: .3em;
}
</style>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipCity: { type: "string" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShippedDate: { type: "date" }
}
}
},
pageSize: 100
},
sortable: true,
resizable: true,
//pageable: true,
scrollable: {
virtual: true
},
columnResize: resizeHeaderPager,
dataBound: resizeHeaderPager,
columns: [
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
},
{
field: "ShipCountry",
title: "Ship Country"
},
{
field: "ShipCity",
title: "Ship City"
},
{
field: "ShipName",
title: "Ship Name"
},
{
field: "ShippedDate",
title: "Shipped Date",
format: "{0:MM/dd/yyyy}",
width: 200
},
{
field: "OrderID",
title: "ID",
width: 80
}
]
});
$(document.body).css("padding-top", $("#grid > .k-grid-header").height());
var w = $("#grid .k-grid-header-wrap").width();
$(window).scroll(function(){
$("#grid .k-grid-header").css("margin-left", - $(window).scrollLeft());
});
});
function resizeHeaderPager(e) {
var newWidth = e.sender.table.width();
e.sender.wrapper.find(".k-grid-header,.k-grid-pager").each(function(){
$(this).width(newWidth);
});
}
</script>
</div>
</body>
</html>