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

随机推荐

Git命令使用总结
Git 教學(1):Git的基本使用 Git 教學(2):Git Branch 的操作與基本工作流程 Git 情境劇:告訴你使用 Git 時什麼情況該下什麼指令如何安裝 Git Mac : 安裝 H ...
tensor flow入门笔记
个人学习笔记,欢迎交流.
powershell字符界面的，powershell加WPF界面的，2048游戏
------[序言]------ 1 2048游戏,有段时间很火,我在地铁上看有人玩过.没错,坐地铁很无聊,人家玩我就一直盯着看. 2 我在电脑上找了一个,试玩了以下,没几次格子就满了.我就气呼呼的放 ...
Python开发入门与实战19-Windows Azure web 应用部署
19. 微软云web应用部署上一章节我们介绍了如何实现在微软云通过虚拟机部署我们的在python django应用,本章我们来介绍如何Windows Azure上部署通过部署网站的方式来部署我们的应 ...
浅谈Android系统移植、Linux设备驱动
一.Android系统架构第一层:Linux内核包括驱动程序,管理内存.进程.电源等资源的程序第二层:C/C++代码库包括Linux的.so文件以及嵌入到APK程序中的NDK代码第三层:An ...
《C++primer》v5 第5章语句读书笔记习题答案
5.1 空语句只有一个";".如果什么也不想做可以使用空语句. 5.2 用花括号{}括起来的叫块,也叫复合语句.有多条语句作用在同一个作用域时,需要用花括号括起来. 5.3 降低了 ...
C# winform 安装程序打包（自定义操作）
(一),安装程序以前用vs制作过安装程序,现在把步骤写出来,有帮助的大家一定要顶哦第一步:建立工程1.打开vs,新建项目->其他项目类型->安装和部署(這個子项下面有安装项目和Web安 ...
C# 字符串操作类
using System; using System.Collections.Generic; using System.Text; using System.Collections; using S ...
安装Eclipse环境变量的配置,
window7系统下的步骤: 第一步:先安装JDK(记住你安装的位置)我安装在D:\Program Files\Java 目录下. 第二步:JDK安装好后,配置环境变量(重 ...
UE4 UriEncode 问题
当Uri 路径中带中文字符时,需要进行编码否则会照成不可预见错误: FString temp = FGenericPlatformHttp::UrlEncode(queryStr); FString ...

关于Kendo的Grid 单元格样式

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

随机推荐

热门专题