Custom Editors with Kendo Grid(自定义列的编辑控件)
来源:互联网 发布:淘宝产品关联怎么做 编辑:程序博客网 时间:2024/06/10 14:47
转自:http://blog.falafel.com/custom-editors-with-kendo-grid/
The Kendo UI Grid makes it easy to display and edit your data in a tabular format. By default, the grid will use a TextBox for string and numeric data columns and a DropDownList for editing columns with a list of options. What if you want to use a different editor type? I’ll demonstrate two examples of using a custom editor for a grid column: MultiSelect and NumericTextBox.
Custom MultiSelect Editor
There are a few steps to use a MultiSelect as a column editor. The first is to make sure your data is formatted correctly. Looking at this sample DataSource, we will use a MultiSelect editor for our “countries” property. If you specify a schema, notice how I do NOT give a type for countries because there is no “array” type and we don’t want Kendo to try to parse our array into a different format. We want to leave it how it is.
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'
}
}
}
}
})
Now we will set up our MultiSelect editor function. You can specify this within the columns.editor property, or if you plan to use it elsewhere, write it as a separate function. In this example, we are creating a kendoMultiSelect and appending it to the container object which is a parameter of the editor. Notice how I set the dataSource to “options.values.” This is an array that we will specify in the columns attributes.
var
multiSelectEditor =
function
(container, options) {
$(
'<input data-bind="value:'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoMultiSelect({
suggest:
true
,
dataSource: options.values
});
};
Next, let’s set up our Grid Columns. In the abbreviated example below, you will see that we are using our multiSelectEditor function as the editor. The “values” property isn’t part of the Kendo columns object, but since JavaScript is dynamic, we can add our own property here to pass along the possible values for the editor. Here I have vm.countries specified which you will see in the full code example that it is just an array of country name strings. We will look at the template next.
columns: [{
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
}]
In the code example above, I provide a template called multiSelectArrayToString. Because our column data is an array, we need to provide a template to display the array correctly. Here we are just doing a .join() to turn our array into a string.
var
multiSelectArrayToString =
function
(item) {
return
item.countries.join(
', '
);
};
We now have all the pieces we need to display and edit an array as a MultiSelect editor in the grid.
Custom NumericTextBox Editor
Now let’s look at using a NumericTextBox editor instead of a regular TextBox. This is a bit more straightforward than a MultiSelect, but we’ll follow similar steps. First, our numeric editor:
var
numericEditor =
function
(container, options) {
$(
'<input data-bind="value:'
+ options.field +
'"/>'
)
.appendTo(container)
.kendoNumericTextBox({
decimals: 2,
min: 0,
format:
'c2'
});
};
We will be editing “price” so the format will be “c2″ to show currency with two decimal places. And finally, we will specify the editor and a format in the columns definition:
columns: [{
field:
'price'
,
editor: numericEditor,
format:
'{0:c}'
}]
Check out the full code on JSFiddle:
运行效果:[html]
<div id="main"> <div id="grid" data-bind="source: dataSource"></div></div>
[resources]
Following resources are loaded into result:kendo.common.min.csskendo.default.min.csskendo.all.min.js
[css]
无
[javascript]
(function () { var multiSelectEditor = function (container, options) { $('<input data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoMultiSelect({ 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);})()
- Custom Editors with Kendo Grid(自定义列的编辑控件)
- Custom Editors with Kendo Grid(自定义列的编辑控件)
- kendo grid显示行号/序号列(二)
- 自定义控件(custom control)的使用
- Kendo Grid MVC Hierarchy with Aggregate
- Kendo UI Grid结合Window完善Custom事件
- kendo grid 的小例子
- Elasticsearch custom analyzer with custom pattern(自定义Analyzer的分词pattern)
- kendo ComboBox显示多列数据(自定义样式)
- 可用于多行分数编辑的 Asp.net UserControl (能够实现可多行编辑,并汇总的自定义Grid控件)
- 把自定义控件集成到Qt Designer中(Integrating Custom Widgets with Qt Designer(转)
- Telerik Kendo --Grid之CheckBox 多选 toolbar监听编辑(ASP.NET MVC)
- Kendo UI:Grid自定义command实现对行数据的操作
- Kendo UI:Grid自定义command实现对行数据的操作
- extjs4 之 Grid 列编辑
- AJAX式資料清單的新選擇-Kendo UI Grid (Grid中查找)
- kendo Grid控件不分页查询大量数据卡死(虚拟分页解决)
- LigerUi中Grid控件的自定义工具条设置(示例)
- window7系统下安装多系统从硬盘安装的方法-CentOS6.3
- RAD Studio XE6 BDE 在Windows 8.1 x64平台的解决方案
- 六种方式实现hibernate查询
- winform 跨窗体给控件传值
- CF 453A(Little Pony and Expected Maximum-若干次掷骰,最大那次期望-推公式)
- Custom Editors with Kendo Grid(自定义列的编辑控件)
- 纯linux JLINK GDBSERVER调试U-BOOT的方法
- c++ primer(第五版)笔记 第三章(2)vector 库初探
- 学生信息管理系统(五)——增、删、改、查
- javafx tabelview 数据绑定中让人疑惑的规定
- [1年工作小结]程序员工作和学习之间的关系
- SPOJ MYQ10 10649. Mirror Number (数位dp)
- 原来我错了
- LightOJ -1029--Civil and Evil Engineer(最小生成树&&最大生成树)