[英]Kendo Grid: how to get the selected item from a Combobox cell template when using with Angular
I have a Kendo grid which I am using within Angular, and have a field with a combo box, that has the editor set to the following function... 我有一个在Angular中使用的Kendo网格,并且有一个带有组合框的字段,其编辑器设置为以下功能...
function comboCellTemplate(container, options) {
var input = $('<input name="' + options.field + '" />')
input.appendTo(container)
var combobox = input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "description",
dataValueField: "code",
dataSource: data,
});
And data is a list of simple json objects... 数据是简单的json对象的列表...
[
{code: 'code1', description: 'desc1'}
{code: 'code2', description: 'desc2'}
[
Each field in the grid data is bound to the same objects (ie with a code and description field) 网格数据中的每个字段都绑定到相同的对象(即带有代码和描述字段)
I a previous post, to get sorting and filtering working I need to bind a field to the display field... 在上一篇文章中,要进行排序和过滤,我需要将一个字段绑定到显示字段...
{
field: "Category.description",
title: "Category",
editor: comboCellTemplate,
template: "#=Category.description#"
},
When I do this, the combo box seems to set the field of the grid to the code. 当我这样做时,组合框似乎将网格的字段设置为代码。 How can I get this to set the grid data to the whole data object (ie the {code, description})
我如何才能将网格数据设置为整个数据对象(即{code,description})
I have tried adding a on - change handler to do this 我试图添加一个on-change handler来做到这一点
input.on('change', function () {
var val = input.val();
//var dataItem = input.dataItem();
options.model.set(options.field, val + 'xx');
});
but can't see how to get the "selected Item" from the combo 但看不到如何从组合中获取“选定项”
I don't seem to be able to find this in the help (in particular when using Angular) 我似乎无法在帮助中找到它(特别是在使用Angular时)
Any help here would be greatly appreciated. 在这里的任何帮助将不胜感激。 regards, Peter
问候,彼得
I think you can simply add a change handler to the editor and set it from there: 我认为您只需将更改处理程序添加到编辑器中,然后从那里进行设置:
function comboCellTemplate(container, options) {
var input = $('<input name="' + options.field + '" />')
input.appendTo(container)
var combobox = input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "description",
dataValueField: "code",
dataSource: data,
change: function () {
options.model.set(options.field, this.dataItem());
}
});
}
Ok, I think I have got to the bottom of this (after lots of diving through the doco) 好吧,我想我已经深入到此(经过大量潜水经历)
I could get everything to work after I discovered that you can give a column a "magical" compare function. 当我发现您可以为列赋予“神奇”的比较功能后,我便可以进行所有工作。
So using this, my field can go back to binding to the whole json object .. and add the sortable as follows... 因此,使用此字段,我的字段可以返回绑定到整个json对象..并按如下所示添加sortable ...
{
field: "Category",
title: "Category",
editor: comboCellTemplate,
template: "#=Category.description#",
sortable:{
compare: function (a, b){
return a.Category.description.localeCompare(b.Category.description);
}
}, },
Now everything works exactly as I expect, and I don't need to do anything extra in the combobox. 现在,一切都按我的预期工作,并且不需要在组合框中执行任何其他操作。 I hope this ("simple when you know how") tip can save someone else all the time it took me to find it.
我希望这个技巧(“简单易懂”)可以在我花了很多时间才为别人省掉。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.