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

随机推荐

Android中ListView的用法
使用方法1 显示简单的文本在layout文件中像加入普通控件一样在layout文件中引入ListView <ListView android:id="@+id/list_view&q ...
C#数据库导出（入）TXT
导出: public void ExportTxt() { var file = System.IO.File.Open(path, System.IO.FileMode.Open); using ( ...
mysql数据库每日定时自动备份
使用navicat
多线程下的for循环问题
List<int> _ValueLis = new List<int>(); private void AddInt(int i) { _ValueLis.Add(i); } ...
C#如何获取项目中的其他文件夹的路径
//一般用string p=AppDomain.CurrentDomain.BaseDirectory+"\\其他"; //其它的还有 string str1 =Process.G ...
前端:IE兼容性的相关方法
有一段时间做前端的时候,IE下的就兼容性是比较令人头痛的问题,我在这一过程中也是看了很多的资料,然后把一些自己觉得比较普遍的问题进行一下相关的总结. 1.在IE6下,格式为png的图片在IE6上的透明 ...
Matlab中的mapminmax函数学习
premnmx() is obselete. Use MAPMINMAX instead. >> x1=[1 2 4] >> [y,ps]=mapminmax(x1); 得到: ...
百度前端技术学院2015JavaScript基础部分实现自己的小型jQuery
// 实现一个简单的Query function $(selector) { ); if (firstChar == "#") { var len = selector.split ...
AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar
进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...
Octave安装和使用
1. Installer Download octave4.0 gnuplot 5.0.4 2. Installation (1) Octave 安装Octave时提示发现系统装有Win8,继续安装 ...

关于Kendo的Grid 单元格样式

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

随机推荐

热门专题