javascript - dropdownlist - ¿Cómo usar ComboBox como columna de la grilla Kendo UI?

kendo js demos

Question

Estoy trabajando con una grilla de Kendo e intento hacer que el campo Nombre sea un combobox que tenga su propia fuente de datos. No obtengo un error de javascript, pero cuando voy a editar el campo de nombre en la grilla, no se muestra un ComboBox. Todavía muestra un campo de entrada.

$(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");
}
});
}); 

No recibo ningún error de javascript.

Answer 1

Para aquellos que "desesperadamente" necesitan un editor personalizado ahora y no pueden esperar para el próximo lanzamiento, al igual que yo ... :-)

... aquí está mi solución ... cambiar línea # 12320 de kendo.all.js a esto:

fields: { field: column.field, format: column.format, editor: column.editor },

...¡y voilá! ¡Ahora la configuración de "editor" para la columna hace efecto!

Escribí el mensaje anterior en http://www.kendoui.com/forums/ui/grid/how-to-define-memo-style-editor-for-grid-cells.aspx#1938316

Era el 6 de enero de 2012, y el lanzamiento actual era v2011.3.1129

Answer 2

Hemos publicado un ejemplo que muestra cómo hacerlo.

Answer 3

¿Qué versión de KendoUI estás usando? Solo los recientes SP1 y March beta tienen soporte de editor personalizado: http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js

Además, yo

1. reemplazado < y > con < y > ;
2. corrigió la propiedad mal escrita "dataSouce" creada para KendoComboBox.

Aquí hay una muestra que he creado que debería llevarlo en la dirección correcta:

Answer 4

Estoy usando MVC4
En grilla:

columns.Bound("Productname").Title("Productname")
.Width(200)
.EditorTemplateName(Productname);

Crear EditorTemplateName = Nombre del producto.
En vista compartir:

@(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>") )

Luego, edite usando:

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", "");
} }

y

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; }

último nombre de la pantalla de la cuadrícula y usted elige, entonces Id o Ma será elegir ocultar