angularjs - dropdownlist - La grilla de Kendo con DropDown en la columna tiene un estilo desordenado

kendo ui angular 2+

Question

Conecté un editor DropDown dentro de una columna de cuadrícula y seguí el ejemplo de Kendo aquí: http://demos.telerik.com/kendo-ui/grid/editing-custom

De hecho, tengo el editor downdown trabajando en el modo Agregar / Editar y con el DataSource enlazado a él. Sin embargo, no puedo entender por qué el estilo está mal.

Como puede ver en la imagen a continuación, se muestra el menú desplegable, pero también hay un cuadro de texto representado justo debajo.

Todo parece estar bien en mi ejemplo de plunker, http://plnkr.co/edit/mxBYYerPLazQwctQkDjS?p=preview , pero no en mi código de proyecto real.

Mi HTML:

 vm.userDimenGridOptions = { // Kendo grid - USER DIMENSIONS...
        selectable: true,
        sortable: true,
        pageable: true,
        columns: [
      { field: "id", width: "50px", hidden: true },             
      { field: "dimension", width: "120px", editor: dimenDropDown, template: "#=dimension#" },
      { field: "hierarchy", width: "80px" },
      { template: ''<button onclick="return up(/'#=uid#/')">up</button><button onclick="return down(/'#=uid#/')">down</button>'' },
      { command: [{ name: "edit", text: '''' }, { name: "destroy", text: '''' }], width: 170 }
        ],           
        editable: "inline",
        toolbar: ["create"],
        messages: {
            commands: {
                cancel: "Cancel",
                canceledit: "Cancel",
                create: "dimension",
                destroy: "Delete",
                edit: "Edit",
                save: "Save changes",
                select: "Select",
                update: "Update"
            }
        }
    };

Mi código de controlador angular:

    // SERVER-SIDE DIMENSIONS DATA SOURCE        
    vm.dimensionsDataSource = new kendo.data.DataSource({
        transport: {
            read: getDimensionsFromServer
        }
    });

 function dimenDropDown(container, options) {
        $(''<input id="dimenDropDown" data-text-field="name" data-value-field="name" data-bind="value:'' + options.field + ''"/>'')
        .appendTo(container)
        .kendoComboBox({
            dataTextField: "name",
            dataValueField: "name",
            dataSource: vm.dimensionsDataSource
        });
     }

También quería mostrar una imagen de lo que parece Insepect Elements en Chrome. De hecho, un comportamiento extraño aquí; ver el SPAN dentro del SPAN. Y dentro de cada etiqueta SPAN hay una etiqueta INPUT. ¿Por qué dos etiquetas de entrada?

Answer 1

Quita la Plantilla de la columna e intenta. Aunque no estoy seguro

{ field: "dimension", width: "120px", editor: dimenDropDown }