[英]How to use ComboBox as Kendo UI grid column?
我正在使用Kendo网格,并且正在尝试使“名称”字段成为具有其自己的数据源的组合框。 我没有收到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");
}
});
});
我没有任何JavaScript错误。
您正在使用哪个版本的KendoUI? 仅最新的SP1和March Beta具有自定义编辑器支持: http : //cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js
另外,我
<
和>
用<
和>
; 对于那些“迫切”需要一个自定义编辑器,而又等不及下一个版本的人,就像我... :-)
...这是我的解决方法...将kendo.all.js的 #12320行更改为:
fields: { field: column.field, format: column.format, editor: column.editor },
...和瞧! 现在,该列的“编辑器”设置生效了!
我在http://www.kendoui.com/forums/ui/grid/how-to-define-memo-style-editor-for-grid-cells.aspx#1938316上写了以上消息
是2012年1月6日,当前版本是v2011.3.1129
我们已经发布了一个示例,展示了如何执行此操作。
我正在使用MVC4
在网格中:
columns.Bound("Productname").Title("Productname")
.Width(200)
.EditorTemplateName(Productname);
创建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>") )
然后使用以下方法进行表单编辑:
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", "");
} }
和
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; }
最后一个网格显示名称,然后选择“ Id”或“ Ma”作为“隐藏”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.