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

随机推荐

error MSB6006: “CL.exe”已退出，代码为X —— 的解决办法
错误 : error MSB6006: “CL.exe”已退出,代码为X . 解决方法: 1.有少可能是执行目录引起的. 参考 http://bbs.csdn.net/topics/370064083 ...
Shell脚本8种字符串截取方法总结
Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.aaa.com/123.htm. 1. # 号截取,删除左边字符,保留右边字符. 代码如下: echo ${va ...
JQ源码学习-1-无new构建
此文章仅为个人学习 Aaron的jQuery源码分析笔记之用. 一:采用构造函数返回原型初始化方法,原型初始化方法又返回构造函数的方式代替new 但当返回的却是‘web’而不是Object ...
自定义iOS7导航栏背景,标题和返回按钮文字颜色
在iOS7下,默认导航栏背景,颜色是这样的,接下来我们就进行自定义,如果你仅仅是更改一下背景和颜色,代码会很简单,不需要很复杂的自定义View来替代leftBarItem 更改导航栏的背景和文字Col ...
C# StreamReader
C#中的StreamReader()有重载的参数是encoding默认貌似是UTF-8的当我们读取文本文件时,一般需要将其指定问default,default是gb2312.
MySQL数据库3 - MySQL常用数据类型
一. MySql常用数据类型数据类型:整数(tinyint smailint int bigint) 定点数 decimal(p,s) ------ 小数点位置固定的 ---> 数 ...
Android Studio 常用快捷键
继承Eclipse的快捷键 : File->Settings->Keymap->有一个Keymaps 下拉菜单,选择Eclipse. 这里讲主要常用的快捷键 : Ctrl ...
Asp.net attributes collection
<?xml version="1.0" encoding="utf-8"?><root> <ContralNames> ...
Bat文件, Services
创建Bat文件自启动Windows Service; Services: sc stop/delete/query/find "service name"; Service Fol ...
MySQL中的while、repeat、loop循环
循环一般在存储过程和存储函数中使用频繁,这里只给出最简单的示例 while delimiter $$ create procedure test_while() begin declare sum i ...

关于Kendo的Grid 单元格样式

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

随机推荐

热门专题