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 }