打开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>
相关推荐
griddatepickercustomfiltering,动态设置显示kendoui grid控件某一列的格式
应用kendoui grid实现的多级分组表格展现,里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进,增加了很多的个别需求实现,在原来的版本是做不到的。...
Kendo UI默认导出的是该列的value值,及查出来的值,有时候我们会用template渲染一下导出的列,比如将“Y”显示成“是”,把“N”显示成“否”。而Kendo UI导出的却是Y/N这种只有程序员看得懂的数据库标识,显然不是...
该代码类里面实现的主要操作: 1.ajax 访问后代接口,并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置,这个是本人亲自写的,并且经过验证是正确的
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
标准kendo ui-grid控件用法,文档形式。
Kendo UI Grid为开发者提供了100多种丰富的网格功能,从基本的筛选、排序,到高级的编页、分层数据分组等等。毫不夸张的说,Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实,下面我为大家整理了它的...
这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...
一个演示是可在Github上页网页的剑道网-滚动。 基本用法 // some grid $ ( "#grid" ) . kendoGrid ( { dataSource : { data : data , pageSize : 20 } , ... //init var kendoGridScroll = new ...
前台kendo ui js grid 的增删改查,js部分。包括分页查询,服务及异常和激活
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。今天小编通过分享本文给大家介绍Kendo Grid editing 自定义验证报错提示的解决方法
kendoui multiselectingrid,自定义选择显示grid中的td
Kendo Grid 下载/导出到 CSV 使用客户端过滤和排序时,下载 Kendo UI 网格控件的排序、过滤内容(如果您使用免费版本,则可能会这样做)。依赖项: jQuery - 可能是任何版本,当然是任何足以支持 Kendo Grid 的最新...
KendoUI速查手册--中文
Ext grid中数据上移下移
ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI
一个演示是可在Github上页网页的剑道并网编辑。 基本用法 // create grid var grid = $grid . kendoGrid ( { dataSource : dataSource , columns : [ { //column settings field : "type" , title : "Type" , ...
kendo ui的中文国际化文件。已经对日期格式化进行了修正。 详细的,请看我的博文,kendo ui那点事里有详细使用说明。
kendo_grid_api