打开JS bin,输入以下代码：
<!DOCTYPE html>
<html>
<head>
<title>KendoUI Test Page</title>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/products.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
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: 430,
toolbar: ["create"],
columns: [
{ field:"ProductName",title:"Product Name" },
{ field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ command: "edit", title: " ", width: "90px" }],
editable: "inline"
});
function categoryDropDownEditor(container, options) {
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
//autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
}
},
select: function(e) {
e.preventDefault();
var grid = $("#grid").data("kendoGrid"),
model = grid.dataItem(this.element.closest("tr"));
console.log(e.sender.dataSource._data[e.sender.selectedIndex]);
var selectedObject=e.sender.dataSource._data[e.sender.selectedIndex];
//model.set("ProductName",selectedObject.Description);
model.ProductName = selectedObject.Description;
model.UnitPrice = 100;
grid.element.find("tr[data-uid='" + model.uid + "'] td:eq(" + 0 + ")").text(selectedObject.Description);
grid.element.find("tr[data-uid='" + model.uid + "'] td:eq(" + 2 + ")").text(100);
// grid.refresh();
}
});
}
</script>
</body>
</html>
相关推荐
本篇文章将深入探讨如何动态地设置Kendo UI Grid中某一列的显示格式，特别是涉及到日期选择器（DatePicker）的自定义过滤功能。 首先，理解`kendoui grid customfilter`标签，这通常意味着我们需要实现自定义的过滤...
应用kendoui grid实现的多级分组表格展现，里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进，增加了很多的个别需求实现，在原来的版本是做不到的。...
Kendo UI Grid是一款强大的数据网格组件，由Telerik公司开发，广泛应用于Web应用程序中，用于展示和操作结构化的数据。这个控件提供了丰富的功能，包括数据分页、排序、过滤、编辑、分组、汇总等，同时支持触摸设备...
Kendo UI默认导出的是该列的value值，及查出来的值，有时候我们会用template渲染一下导出的列，比如将“Y”显示成“是”，把“N”显示成“否”。而Kendo UI导出的却是Y/N这种只有程序员看得懂的数据库标识，显然不是...
这两天项目需要，临时做了一个，没有封装，该grid可以实现列和行的自定义添加和删除，包括修改标题，以及列的右击添加事件。希望对你们有所帮助！双击列名可以对列名进行修改，右键列名可以选择左侧和右侧添加列以及...
然后，通过JavaScript的`$("#grid").kendoGrid()`方法初始化Grid，并传入相应的配置选项，如列定义、数据源等。 在数据源方面，Kendo UI Grid支持多种类型的数据源，包括Ajax、JSON、XML等。在描述中提到的服务交互...
该代码类里面实现的主要操作： 1.ajax 访问后代接口，并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置，这个是本人亲自写的，并且经过验证是正确的
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
本文将深入探讨如何在Kendo UI的Multiselect Grid中实现自定义选择显示TD的功能。这个功能通常用于增强用户体验，允许用户以更灵活的方式选择和查看表格中的数据。 首先，Kendo UI的Multiselect是一个可以展示多个...
Kendo UI Grid为开发者提供了100多种丰富的网格功能，从基本的筛选、排序，到高级的编页、分层数据分组等等。毫不夸张的说，Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实，下面我为大家整理了它的...
在开发Web应用时，Kendo UI的Kendo Grid是一个非常重要的组件，它提供了一种高效的方式来展示和编辑数据。Kendo Grid支持多种编辑模式，如弹出式编辑、内联编辑和分步编辑，同时也提供了强大的验证机制来确保输入的...
一个演示是可在Github上页网页的剑道网-滚动。 基本用法 // some grid $ ( "#grid" ) . kendoGrid ( { dataSource : { data : data , pageSize : 20 } , ... //init var kendoGridScroll = new ...
1. 数据网格（Grid）：Kendo UI Grid 是一个高度可配置的数据展示和管理工具，支持数据分页、排序、过滤、编辑等功能，同时提供了强大的行选择、分组、汇总和远程数据绑定能力。 2. 日历（Calendar）：提供基本的...
1. **组件丰富**：Kendo UI包含了数据网格（Grid）、日历（Calendar）、下拉列表（ComboBox）、日期选择器（DatePicker）、时间选择器（TimePicker）、滑块（Slider）、图表（Charts）等多种UI组件，覆盖了日常开发...
5. DatePicker（日期选择器）：为用户提供一个简洁的日期选择界面。 6. DropDownList（下拉菜单）：显示一组预定义的选项，用户单击选择。 7. Editor（编辑器）：提供富文本编辑功能，类似于Word编辑器。 8. Grid...
Kendo UI Grid是Telerik公司开发的一个用于构建交互式数据网格的JavaScript库，它在Web应用中被广泛使用，尤其在C#后端支持的情况下。Kendo Grid API提供了丰富的功能，包括数据绑定、分页、排序、过滤、编辑、分组...
在本文中，我们将深入探讨Kendo UI中的TreeList组件，这是一种功能强大的前端工具，用于展示层级数据。TreeList结合了表格和树形视图的功能，适用于处理需要展示具有父子关系的复杂数据集的情况。以下是对Kendo UI ...
Kendo Grid 下载/导出到 CSV 使用客户端过滤和排序时，下载 Kendo UI 网格控件的排序、过滤内容（如果您使用免费版本，则可能会这样做）。依赖项： jQuery - 可能是任何版本，当然是任何足以支持 Kendo Grid 的最新...
- `/js/jquery.min.js`: jQuery库，KendoUI依赖于jQuery，可选择1.9.1版本或其他版本。 - `/js/kendo.all.min.js`: 包含了所有KendoUI控件和功能的JavaScript文件。 完成这些步骤后，您的项目就具备了使用Kendo...