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>
相关推荐
应用kendoui grid实现的多级分组表格展现，里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进，增加了很多的个别需求实现，在原来的版本是做不到的。...
Kendo UI框架提供了强大的Excel导出功能，通过Grid的saveAsExcel能方便地导出Grid中的数据，而且格式美观大方，使用起来也非常方便。但是在实际使用中不是很理想，主要有以下两个问题： 1. 导出的列数据是原始值 ...
griddatepickercustomfiltering,动态设置显示kendoui grid控件某一列的格式
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
KendoUI速查手册--中文
该代码类里面实现的主要操作： 1.ajax 访问后代接口，并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置，这个是本人亲自写的，并且经过验证是正确的
Kendo UI Grid为开发者提供了100多种丰富的网格功能，从基本的筛选、排序，到高级的编页、分层数据分组等等。毫不夸张的说，Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实，下面我为大家整理了它的...
ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI
[Packt Publishing] 移动应用开发 Kendo UI Mobile 实现 英文版 [Packt Publishing] Building Mobile Applications Using Kendo UI Mobile and ASP NET Web API E Book ☆ 图书概要：☆ Get started with ...
kendo ui的中文国际化文件。已经对日期格式化进行了修正。 详细的，请看我的博文，kendo ui那点事里有详细使用说明。
标准kendo ui-grid控件用法，文档形式。
Telerik Collection for .NET 2018 R3 kendoui.for.jquery.2018.3.911.commercial
Telerik Collection for .NET 2018 R2 SP1 kendoui.for.jquery.2018.2.620.commercial
kendo ui 是一套Telerik 公司推出的面向HTML5 及 移动设备的轻量级UI组件,其主要有Js+Css实现了入 Grid,Tree,Menu,Chart等各种业务组件. 不限于服务端是 Java 或者 .Net, php可以运用于多种环境,对Ajax,Rest都有...
kendoui框架最新版本kendoui框架最新版本kendoui框架最新版本kendoui框架最新版本kendoui框架最新版本kendoui框架最新版本
kendoui asp.net mvc server side wrappers , kendoui asp.net mvc 套件開版
Kendo UI Professional目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库；Kendo UI...
KendoUI2016.3.19最新版KendoUI2016.3.19最新版KendoUI2016.3.19最新版KendoUI2016.3.19最新版KendoUI2016.3.19最新版
本文档主要收集了Kendo UI Web的使用教程以及对比评测等。
kendoui 2016 商业完整版