Kendo grid with DropDown in column has messed up s

Question

I've hooked up a DropDown editor inside a Grid column, and I've followed the Kendo example here : http://demos.telerik.com/kendo-ui/grid/editing-custom

I actually do have the downdown editor working in Add/Edit mode, and with the DataSource binded to it. However, I can't figure out why the styling is all messed up.

As you can see in the below image, the dropdown is rendered but there is also an text box rendered just below it.

All appears to be styling fine in my plunker example, http://plnkr.co/edit/mxBYYerPLazQwctQkDjS?p=preview, but not in my real project code.

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

My angular controller code :

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

I also wanted to show an image of what the Insepect Elements looks lik in Chrome. Indeed some weird behavior here; see the SPAN inside the SPAN. And within each SPAN tag there's an INPUT tag. Why two input tags ???

Answer 1

Take the Template off from the column and try. I'm not sure though

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