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版本上改进，增加了很多的个别需求实现，在原来的版本是做不到的。...
在IT领域，Kendo UI Grid是一款非常流行的JavaScript数据可视化组件，用于构建强大的、响应式的网格视图。在处理数据展示时，我们常常需要对不同列的数据进行格式化，以满足特定的显示需求。本篇文章将深入探讨如何...
Kendo UI框架提供了强大的Excel导出功能，通过Grid的saveAsExcel能方便地导出Grid中的数据，而且格式美观大方，使用起来也非常方便。但是在实际使用中不是很理想，主要有以下两个问题： 1. 导出的列数据是原始值 ...
1. 数据网格（Grid）：Kendo UI Grid 是一个高度可配置的数据展示和管理工具，支持数据分页、排序、过滤、编辑等功能，同时提供了强大的行选择、分组、汇总和远程数据绑定能力。 2. 日历（Calendar）：提供基本的...
Kendo UI Grid是一款强大的数据网格组件，由Telerik公司开发，广泛应用于Web应用程序中，用于展示和操作结构化的数据。这个控件提供了丰富的功能，包括数据分页、排序、过滤、编辑、分组、汇总等，同时支持触摸设备...
1. **组件丰富**：Kendo UI包含了数据网格（Grid）、日历（Calendar）、下拉列表（ComboBox）、日期选择器（DatePicker）、时间选择器（TimePicker）、滑块（Slider）、图表（Charts）等多种UI组件，覆盖了日常开发...
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
该代码类里面实现的主要操作： 1.ajax 访问后代接口，并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置，这个是本人亲自写的，并且经过验证是正确的
此版本中，Kendo UI提供了众多UI组件，如网格（Grid）、图表（Charts）、日历（Calendar）、下拉列表（DropDownList）、树形视图（TreeView）、分页（Pager）、表单（Form）等，覆盖了Web应用中的常见需求。...
Kendo UI Grid为开发者提供了100多种丰富的网格功能，从基本的筛选、排序，到高级的编页、分层数据分组等等。毫不夸张的说，Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实，下面我为大家整理了它的...
"Kendo UI for Vue" Kendo UI for Vue 是一个使用 Vue.js 框架的本机组件库，旨在帮助开发者快速构建企业级 Web 应用程序。下面将详细讲解 Kendo UI for Vue 的使用方法、配置过程、组件介绍等知识点。 什么是 ...
Kendo UI本身是一个全面的JavaScript库，包含多种UI组件，如数据网格（Grid）、日历（Calendar）、图表（Charts）、下拉列表（DropdownList）等。这些组件遵循响应式设计，能在不同设备上提供一致的用户体验。同时，...
Kendo UI开发教程涵盖了使用Kendo UI这一强大的前端框架开发Web应用的知识。Kendo UI是Telerik公司开发的一个基于HTML5和jQuery的综合UI框架，它支持开发者构建时尚且功能丰富的Web应用程序。本教程将详细探讨Kendo ...
[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 是一款由Telerik公司开发的前端UI库，专为构建现代Web应用程序而设计。它提供了丰富的组件集合，包括数据网格、日历、图表、表单元素等，支持多种浏览器和移动设备，适用于创建交互性强、用户体验优良的Web...
在"Kendo_grid js"这个项目中，我们将探讨如何使用Kendo UI的JavaScript API来实现Grid的增删改查功能，以及如何进行分页查询、服务交互和异常处理。 首先，Kendo UI Grid的创建通常涉及HTML模板和JavaScript配置。...
kendo ui的中文国际化文件。已经对日期格式化进行了修正。 详细的，请看我的博文，kendo ui那点事里有详细使用说明。
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和... Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。
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...
kendo UI 各个控件的使用说明，着重对grid的使用做了详解，包括增删改查以及查询功能