javascript 如何使用 ComboBox 作为 Kendo UI 网格列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9559269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use ComboBox as Kendo UI grid column?
提问by Frankie
I'm working with a kendo grid and I'm trying to make Name field a combobox that has it's own datasource. I'm not getting a javascript error, but when I go to edit the name field in the grid, it is not showing a ComboBox. It still shows an input field.
我正在使用剑道网格，并且正在尝试使 Name 字段成为一个具有自己数据源的组合框。我没有收到 javascript 错误，但是当我去编辑网格中的名称字段时，它没有显示 ComboBox。它仍然显示一个输入字段。
$(function () {
console.log("ready");
var datasource = new kendo.data.DataSource({
transport: {
read: {
url: "", // Returns all items
dataType: "json"
}
},
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false, nullable: false, visible: false },
Name: { type: "string", editable: true, nullable: false, validation: { required: true} },
Description: { type: "string", editable: true, validation: { required: true} }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: datasource,
editable: true,
height: 400,
columns: [
{ field: "Id", width: 200 },
{
field: "Name",
editor: function (container, options) { // This is where you can set other control types for the field.
$('< input name="' + options.field + '"/>').appendTo(container).kendoComboBox({
dataSouce: [{ Id: "1", Name: "MaryMaryMary" }, { Id: "2", Name: "John"}],
dataValueField: "Id",
dataTextField: "Name",
});
}
}
],
dataBound: function (e) {
console.log("DataBound");
}
});
});
I'm not getting any javascript errors.
我没有收到任何 javascript 错误。
回答by Joel D'Souza
What version of KendoUI are you using? Only the recent SP1 and March beta have custom editor support: http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js
您使用的是哪个版本的 KendoUI？只有最近的 SP1 和 3 月测试版有自定义编辑器支持：http: //cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js
Additionally, I
此外，我
- replaced
<and>with<and>; - corrected the misspelled "dataSouce" property created for the KendoComboBox.
- 用
<and>替换<and>; - 更正了为 KendoComboBox 创建的拼写错误的“dataSouce”属性。
Here's a samplethat I created that should get you going in the right direction:
回答by J. Bruni
For those who "desperately" need a custom editor now and can't wait for next release, just like me... :-)
对于那些现在“迫切地”需要自定义编辑器并且迫不及待地等待下一个版本的人，就像我一样...... :-)
...here is my workaround... change line #12320 of kendo.all.jsto this:
...这是我的解决方法...将kendo.all.js 的第 #12320 行更改为：
fields: { field: column.field, format: column.format, editor: column.editor },
...and voilà! Now the "editor" setting for the column makes effect!
……瞧！现在该列的“编辑器”设置生效了！
I wrote the above message at http://www.kendoui.com/forums/ui/grid/how-to-define-memo-style-editor-for-grid-cells.aspx#1938316
我在http://www.kendoui.com/forums/ui/grid/how-to-define-memo-style-editor-for-grid-cells.aspx#1938316写了上面的消息
It was January 6 2012, and the current release was v2011.3.1129
那是 2012 年 1 月 6 日，当前版本是 v2011.3.1129
回答by Cuong Cuong
I am using MVC4
In grid:
我
在网格中使用 MVC4 ：
columns.Bound("Productname").Title("Productname")
.Width(200)
.EditorTemplateName(Productname);
Create EditorTemplateName = Productname.
In view share:
创建 EditorTemplateName = 产品名称。
在视图中分享：
@(Html.Kendo().ComboBox()
.Name("Ten_dvt")
.DataValueField("Ten_dvt")
.DataTextField("Ten_dvt")
.Filter(FilterType.Contains)
.HighlightFirst(true)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Dm_dvt", "Combo");
});
}) .Events(e => e.Select("Select_Ma_dvt").Change("Change_Ma_dvt"))
.HeaderTemplate("<table style=\"width:100%\"><tr><td align=\"left\"
style=\"width:30%\">" + @Tcommont("Ma") + "</td><td align=\"left\"
style=\"width:70%\">" + @Tcommont("Ten") + "</td></tr></table>")
.Template("<table style=\"width:100%\"><tr><td align=\"left\" style=\"width:30%\">" + "#: data.Ma_dvt #" + "</td><td align=\"left\"
style=\"width:70%\">" + "#: data.Ten_dvt #" + "</td></tr></table>" +
"<div style='width:0px; height:0px;
overflow:hidden'>;#:data.Ma_dvt#;#:data.Ten_dvt#;</div>") )
Then form edit using:
然后表单编辑使用：
function Change_Ma_dvt(e) { if (this.selectedIndex == -1) {
var grid = $("#gridItem2").data("kendoGrid");
var _dataItem = grid.dataItem(grid.select());
_dataItem.set("Ten_dvt", "");
_dataItem.set("Ma_dvt", "");
} }
and
和
function Select_Ma_dvt(e) { var _Arr = e.item.text().split(";");
var grid = $("#gridItem2").data("kendoGrid");
var _dataItem = grid.dataItem(grid.select());
_dataItem.set("Ma_dvt", _Arr[1]);
break; }
last grid show name and you choose then Id or Ma will be choose hide
最后一个网格显示名称，您选择然后 Id 或 Ma 将选择隐藏
