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