Referenc:
http://www.telerik.com/forums/binding-kendoui-grid-to-dynamic-column-and-values-kendo-ui-complete-resources-buy-try
1.html page
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.flat.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>Grid autogenerate columns with CRUD</title>
</head>
<body>
<div id="grid" style="width:600px;"></div>
</body>
</html>
2.Js file
var data = [{
"Name": "daya",
"Role": "Developer",
"Dept": "Dev",
"Dept1": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "siva",
"Role": "Developer",
"Dept": "Dev",
"Dept1": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "sivadaya",
"Role": "Developer",
"Dept": "Dev",
"Dept1": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}, {
"Name": "dayasiva",
"Role": "Developer",
"Dept": "Dev",
"Dept1": "Dev",
"Date": "\/Date(836438400000)\/",
"Balance": 23
}];
//in the success handler of the ajax method call the function below with the received data:
var dateFields = [];
generateGrid(data)
function generateGrid(gridData) {
var model = generateModel(gridData[0]);
var parseFunction;
if (dateFields.length > 0) {
parseFunction = function (response) {
for (var i = 0; i < response.length; i++) {
for (var fieldIndex = 0; fieldIndex < dateFields.length; fieldIndex++) {
var record = response[i];
record[dateFields[fieldIndex]] = kendo.parseDate(record[dateFields[fieldIndex]]);
}
}
return response;
};
}
var grid = $("#grid").kendoGrid({
dataSource: {
data: gridData,
schema: {
model: model,
parse: parseFunction
}
},
editable: true,
sortable: true
});
}
function generateModel(gridData) {
var model = {};
model.id = "ID";
var fields = {};
for (var property in gridData) {
var propType = typeof gridData[property];
if (propType == "number") {
fields[property] = {
type: "number",
validation: {
required: true
}
};
} else if (propType == "boolean") {
fields[property] = {
type: "boolean",
validation: {
required: true
}
};
} else if (propType == "string") {
var parsedDate = kendo.parseDate(gridData[property]);
if (parsedDate) {
fields[property] = {
type: "date",
validation: {
required: true
}
};
dateFields.push(property);
} else {
fields[property] = {
validation: {
required: true
}
};
}
} else {
fields[property] = {
validation: {
required: true
}
};
}
}
model.fields = fields;
return model;
}
相关推荐
应用kendoui grid实现的多级分组表格展现,里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进,增加了很多的个别需求实现,在原来的版本是做不到的。...
griddatepickercustomfiltering,动态设置显示kendoui grid控件某一列的格式
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...
Kendo UI Grid为开发者提供了100多种丰富的网格功能,从基本的筛选、排序,到高级的编页、分层数据分组等等。毫不夸张的说,Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实,下面我为大家整理了它的...
该代码类里面实现的主要操作: 1.ajax 访问后代接口,并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置,这个是本人亲自写的,并且经过验证是正确的
标准kendo ui-grid控件用法,文档形式。
剑道网格卷轴 kendo-ui 库的程序网格... kendoGrid ( { dataSource : { data : data , pageSize : 20 } , ... //init var kendoGridScroll = new KendoGridScroll . Model ( $ ( "#grid" ) , function ( gri
前台kendo ui js grid 的增删改查,js部分。包括分页查询,服务及异常和激活
Kendo Grid 下载/导出到 CSV 使用客户端过滤和排序时,下载 Kendo UI 网格控件的排序、过滤内容(如果您使用免费版本,则可能会这样做)。依赖项: jQuery - 可能是任何版本,当然是任何足以支持 Kendo Grid 的最新...
KendoUI速查手册--中文
kendo_grid_api
请注意,Kendo Grid 属于 Kendo UI 的“专业”版本,因此需要适当的许可才能使用。 因此,我不提供受版权保护的脚本/样式以避免违反 Telerik 的许可条款。 但是有 30 天的试用期: Kendo-Scripts 应该进入Scripts...
kendoGrid ( { dataSource : dataSource , columns : [ { //column settings field : "type" , title : "Type" , editor : function ( container , options ) { // create custom editors // setup required ...
Kendo UI是一个强大的框架用于快速HTML5 UI开发。基于最新的HTML5、CSS3和JavaScript标准。今天小编通过分享本文给大家介绍Kendo Grid editing 自定义验证报错提示的解决方法
这两天项目需要,临时做了一个,没有封装,该grid可以实现列和行的自定义添加和删除,包括修改标题,以及列的右击添加事件。希望对你们有所帮助!双击列名可以对列名进行修改,右键列名可以选择左侧和右侧添加列以及...
Get started with Kendo UI Mobile and learn how to integrate it with HTTP based services built using ASP NET Web API Overview Learn the basics of developing mobile applications using ...
kendo-grid-duallistbox 用CodeSandbox创建
Ligerui Grid合并单元格 ,指定列合并单元格,该合并是整列合并