http://dojo.telerik.com/asIle
修改代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<script src="http://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "130px" },
{ command: "edit", title: " ", width: "120px" }],
editable: "inline"
});
});
function categoryDropDownEditor(container, options) {
if(options.model.ProductName==="Chai"){
$('<input data-bind="value:'+options.field+'"/>').appendTo(container);
}
else if(options.model.ProductName==="Chang"){
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: createDataSource(options.model.ProductName)
});
}
else{
$('<input data-text-field="userName" data-value-field="userId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoMultiSelect({
autoBind: false,
dataSource: createDataSource(options.model.ProductName)
});
}
}
function createDataSource(id) {
if(id==="Chang"){
return new kendo.data.DataSource({
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
}
});
}
else {
return new kendo.data.DataSource({
transport: {
read: "http://192.168.88.14:8400/DrugPortal/user/search"
}
});
}
}
</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开发教程涵盖了使用Kendo UI这一强大的前端框架开发Web应用的知识。Kendo UI是Telerik公司开发的一个基于HTML5和jQuery的综合UI框架，它支持开发者构建时尚且功能丰富的Web应用程序。本教程将详细探讨Kendo ...
Kendo UI本身是一个全面的JavaScript库，包含多种UI组件，如数据网格（Grid）、日历（Calendar）、图表（Charts）、下拉列表（DropdownList）等。这些组件遵循响应式设计，能在不同设备上提供一致的用户体验。同时，...
Kendo UI 是一款由Telerik公司开发的前端UI库，专为构建现代Web应用程序而设计。它提供了丰富的组件集合，包括数据网格、日历、图表、表单元素等，支持多种浏览器和移动设备，适用于创建交互性强、用户体验优良的Web...
[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_grid js"这个项目中，我们将探讨如何使用Kendo UI的JavaScript API来实现Grid的增删改查功能，以及如何进行分页查询、服务交互和异常处理。 首先，Kendo UI Grid的创建通常涉及HTML模板和JavaScript配置。...
Kendo UI framework is developed by Telerik - a leading provider of UI components for web, desktop and mobile applications. Trusted by over 100,000 customers worldwide for our devotion to quality and ...
kendo UI 各个控件的使用说明，着重对grid的使用做了详解，包括增删改查以及查询功能
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和... Kendo UI包含了开发现代JavaScript开发所需要的所有一切，包括：强大的数据源，通用的拖拉（Drag-and-Drop）功能，模板，和UI控件。