关于Kendo的Grid 单元格样式

<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>welcome</title>

</head >
<body style="height: 100%;">
<div id="main">
<div id="grid" data-bind="source: dataSource"></div>
</div>
</body
</html>
<script>
(function () {

var multiSelectEditor = function (container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
suggest: true,
dataSource: options.values
});
};

var numericEditor = function (container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 2,
min: 0,
format: 'c2'
});
};

var multiSelectArrayToString = function (item) {
return item.countries.join(', ');
};

var vm = kendo.observable({
countries: ['Canada', 'Mexico', 'United States'],
dataSource: new kendo.data.DataSource({
data: [{
id: 1,
product: 'X002',
countries: ['Mexico', 'Canada'],
price: 0.98
}, {
id: 2,
product: 'X036',
countries: ['United States'],
price: 2.96
}, {
id: 3,
product: 'X098',
countries: [],
price: 45.90
}, ],
schema: {
model: {
id: 'id',
fields: {
'id': {
type: 'number'
},
'product': {
type: 'string'
},
'countries': {},
'price': {
type: 'number'
}
}
}
}
}),
});

$('#grid').kendoGrid({
columns: [{
command: 'edit',
width: '120px',
}, {
field: 'product'
}, {
field: 'countries',
editor: multiSelectEditor, // function that generates the multiSelect control
values: vm.countries, // custom property with array of values
template: multiSelectArrayToString // template: how to display text in grid
}, {
field: 'price',
editor: numericEditor,
format: '{0:c}'
}],
editable: 'inline',

});

kendo.bind('#main', vm);

})()
</script>

关于Kendo的Grid 单元格样式的更多相关文章

extjs grid 单元格多选
new Ext.grid.CellSelectionModel({ last : false, // 上一次选中的单元格 selections : [], // 选择区缓存 handleMouseDo ...
ExtJs4学习（十）Grid单元格换色和行换色的方法
Grid单元格换色 { text:'类别', dataIndex:'type', align:'center', renderer:function(value,metaData){ console. ...
UITableViewCell 单元格样式
UITableViewCell 单元格样式作用 typedef NS_ENUM(NSInteger, UITableViewCellStyle) { UITableViewCellStyleDefau ...
poi的各种单元格样式以及一些常用的配置
之前我做过一个poi到处excel数据的博客,但是,后面使用起来发现,导出的数据单元格样式都不对. 很多没有居中对齐,很多单元格的格式不对,还有就是单元格的大小不对,导致数据显示异常,虽然功能可以使用 ...
用NPOI创建Excel、合并单元格、设置单元格样式、边框的方法
本篇文章小编为大家介绍,用NPOI创建Excel.合并单元格.设置单元格样式.边框的方法.需要的朋友参考下今天在做项目中,遇到使用代码生成具有一定样式的Excel,找了很多资料,最后终于解决了,Ex ...
127使用 TableView 自带的单元格样式实现好友列表，另外在单元格中添加辅助按钮
类似的做法如之前这篇随笔:114自定义UITableViewCell(扩展知识:为UITableViewCell添加动画效果) 相比之下:自定义 UITableViewCell 的内容灵活,可根据需求 ...
取得grid单元格里刚输入的文本，未保存的文本
取得grid单元格里刚输入的文本内容,未保存的文本,正在输入的值,正在编辑的值,编辑框 dbgrid->DataSource->DataSet->UpdateRecord(); pr ...
创建excel,合并单元格,设置单元格样式
package com.huawei.excel; import java.io.File;import java.io.FileOutputStream;import java.util.Date; ...
NPOI 生成Excel （单元格合并、设置单元格样式：字段，颜色、设置单元格为下拉框并限制输入值、设置单元格只能输入数字等）
NPIO源码地址:https://github.com/tonyqus/npoi NPIO使用参考:源码中的 NPOITest项目下面代码包括: 1.包含多个Sheet的Excel 2.单元格合并 ...

随机推荐

php上传文件类型
下面提供一张IE和火狐浏览器的文件类型对照表: ie 火狐 id 后缀名 php识别出的文件类型 0 gif image/gif 1 jpg image/jpeg 2 png image/png 3 ...
java堆栈区别
/*java程序在运行时,jvm把内存分为5块,栈,堆,方法区,本地方法区,寄存器栈:存储的是局部变量,在函数语句中定义的变量都是局部变量 for(int i=1;i<=5;i++){} ad ...
资源：Python for Windows
http://win32com.goermezer.de/content/blogsection/7/284/ 一个网站,有各种Windows 下使用 Python 的脚本示例,很不错,有待继续挖掘. ...
Ubuntu 安装和使用 Zip – rar – 7zip
http://www.rongxuan.org/2013/08/13/ubuntu-%E5%AE%89%E8%A3%85%E5%92%8C%E4%BD%BF%E7%94%A8-zip-rar-7zip ...
5.String
一．古罗马皇帝凯撒在打仗时曾经使用过一种方法加密军事情报.请编写一个程序,使用上述算法加密或解密用户输入的英文字串. 设计思想:先提示用户进行的操作是加密还是解密,用户输入一个字符串,加密时将前23个 ...
Ant_的最完整build.xml解释
Ant的概念 Make命令是一个项目管理工具,而Ant所实现功能与此类似.像make,gnumake和nmake这些编译工具都有一定的缺陷,但是Ant却克服了这些工具的缺陷.最初Ant开发者在开发跨平 ...
Python开发入门与实战18-Windows Azure 虚拟机部署
18. 微软云虚拟机部署上一章节我们介绍了如何在新浪云部署我们的在python django应用,本章我们来介绍如何Windows Azure上部署我们的应用. 18.1. 注册Windows Az ...
freeCAD预选项编辑器
freeCAD的预选项系统在 Edit 目录 -> Preferences. freecad的功能分成不同的模块,每一模块负责一个特定的工作台工作.freecad还使用了一个概念叫晚加载,这意味 ...
伪装的方式实现js继承
看起来属性放到"父类"里了,这种方式原型中还是有属性的,只不过在"子类"的构造器中用call方法调用父类构造函数的时候,"子类"被强行赋值了 ...
sublime text 3 快捷键大全
Sublime Text 3 快捷键精华版 Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+Shift+W:关闭所 ...

关于Kendo的Grid 单元格样式

关于Kendo的Grid 单元格样式的更多相关文章

随机推荐

热门专题