关于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.单元格合并 ...

随机推荐

Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
Three.Js学习第一天
因为工作需求,最近接触到了ThreeJs库,国内学习文档的确少,所以在这里写下bolgs记录学习史,并且给后面学习的人尽一份微博之力. 3D场景依靠WebGL技术.目前支持比较好的浏览器,谷歌.火狐. ...
VIM神器打造Javascript开发环境
http://xuyufish.com/vim%E7%A5%9E%E5%99%A8%E6%89%93%E9%80%A0javascript%E5%BC%80%E5%8F%91%E7%8E%AF%E5% ...
linux 内核学习之八进程调度过程分析
一关于进程的补充进程调度的时机中断处理过程(包括时钟中断.I/O中断.系统调用和异常)中,直接调用schedule(),或者返回用户态时根据need_resched标记调用schedule() ...
java基础之序列化
一.序列化和反序列化的概念把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬 ...
移除project,testsuite,testcase级别所有的custom properties
// Remove all custom properties on Project level. If removed, custom properties cannnot be injected ...
重读高程3: c2-3 script元素
1. 异步脚本一定会在页面的load事件前执行,但可能会在domC ontentLoaded事件触发之前或者之后执行.
C++11：新式的字符串字面常量（String Literal）
自C++11起,我们可以定义 raw string 字符串字面常量. Raw string 允许我们定义所见即所得的字符串字面常量,从而可以省下很多用来修饰特殊字符的符号. Raw string 以 ...
有关javascript的性能优化（合理的管理内存）
使用具备垃圾收集机制的语言编写程序,开发人员一般不必操心内存管理的问题.但是,Javascript在进行内存管理及收集时面临的问题是有点与众不同.其中最主要的一个问题是分配给Web浏览器的可用内存数量 ...
JS总结节点
nodeName 获取节点名称元素节点:返回标记名称属性节点:返回属性名称文本节点:返回文本#text nodeTyle 获取节点类型元素节点:返回1 属性节点:返回2 文本节点:返回3 n ...

关于Kendo的Grid 单元格样式

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

随机推荐

热门专题