使用下拉列表编辑器的剑道网格-线编辑(编辑自定义编辑器)
Kendo Grid - Line Editing Using A Drop-Down List Editor (Editing Custom Editor)
我使用本页提供的示例Telerik在Kendo UI网格中进行内联编辑,我想将内联下拉列表绑定到"类别"列中"绑定到JSON对象,而不是使用他们在演示中的xml数据。当我使用JSON数据时,下拉列表不起作用。我如何将JSON对象绑定到内联下拉列表?可以在这里找到一个完全起作用的fiddle。
这是绑定数据源的JavaScript函数。
function categoryDropDownEditor(container, options) {
var categories = {
'Category': [
{ 'CategoryName': 'Beverages', 'CategoryID': 1 },
{ 'CategoryName': 'Condiments', 'CategoryID': 2 },
{ 'CategoryName': 'Confections', 'CategoryID': 3 },
{ 'CategoryName': 'Dairy Products', 'CategoryID': 4 },
{ 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 },
{ 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 },
{ 'CategoryName': 'Produce', 'CategoryID': 7 },
{ 'CategoryName': 'Seafood', 'CategoryID': 8 }
]
};
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: categories
});
}
尝试更改以下内容。
var Category =
[
{ 'CategoryName': 'Beverages', 'CategoryID': 1 },
{ 'CategoryName': 'Condiments', 'CategoryID': 2 },
{ 'CategoryName': 'Confections', 'CategoryID': 3 },
{ 'CategoryName': 'Dairy Products', 'CategoryID': 4 },
{ 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 },
{ 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 },
{ 'CategoryName': 'Produce', 'CategoryID': 7 },
{ 'CategoryName': 'Seafood', 'CategoryID': 8 }
];
并且作为数据源使用
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: Category
});
function categoryDropDownEditor(container, options) {
var categories = {
'Category': [
{ 'CategoryName': 'Beverages', 'CategoryID': 1 },
{ 'CategoryName': 'Condiments', 'CategoryID': 2 },
{ 'CategoryName': 'Confections', 'CategoryID': 3 },
{ 'CategoryName': 'Dairy Products', 'CategoryID': 4 },
{ 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 },
{ 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 },
{ 'CategoryName': 'Produce', 'CategoryID': 7 },
{ 'CategoryName': 'Seafood', 'CategoryID': 8 }
]
};
$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: categories.Category
});
}
看看上面的内容,您需要使用属性来绑定到数据源。由于剑道数据源是Array对象所必需的。
相关文章:
- ExtJS网格单元格编辑器,防止焦点松动问题
- 可以't使用PHP使用Froala编辑器上传图像URL
- 如何在corona sdk中从CK编辑器中检索数据
- Eclipse编辑器中无法访问的代码
- 如何将拼写检查集成到密文编辑器
- 一个页面上有多个Ace编辑器,没有预先设置元素
- ACE编辑器正在删除模块,因为define是't一根绳子
- 如何从DOM中删除Aloha编辑器
- 用于用户内容的简单代码编辑器/文本格式化程序(在Rails中)
- 在plone 5中将自定义的灵活性内容类型插入到tinymce编辑器中
- 如何在tinymce编辑器中将点击事件绑定到html标签
- 扩展 ACE 编辑器,如何导入自定义文件
- dhtmlx添加新行并启动单元格编辑器
- 为现有Roslyn语言lexer/parser选择基于javascript的代码编辑器
- THRE.js编辑器中的鼠标问题
- 用于 Eclipse 的 JavaScript 编辑器插件
- 无法加载Ace.js编辑器模式和主题(命名空间项目&AMD require.js&grunt
- 如何使用掩码编辑扩展器用日期格式 MM/yyyy 屏蔽文本框
- 使用下拉列表编辑器的剑道网格-线编辑(编辑自定义编辑器)
- MVC asp.net服务器端定时器,防止用户编辑定时器