列中DropDown的Kendo网格搞砸了样式

Question

我在Grid列中连接了一个DropDown编辑器，我在这里遵循了Kendo示例： http://demos.telerik.com/kendo-ui/grid/editing-custom

我实际上让下行编辑器在添加/编辑模式下工作，并将DataSource绑定到它。但是，我无法弄清楚为什么造型都搞砸了。

正如您在下图所示，下拉列表已呈现，但在其下方还有一个文本框。

在我的plunker示例http://plnkr.co/edit/mxBYYerPLazQwctQkDjS?p=preview中，所有内容似乎都很好，但在我的实际项目代码中却没有。

我的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"
            }
        }
    };

我的角度控制器代码：

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

我还想展示一下Insepect Elements在Chrome中的外观。确实这里有一些奇怪的行为;请参阅SPAN中的SPAN。在每个SPAN标记内都有一个INPUT标记。 为什么两个输入标签???

Answer 1

从列中取出模板并尝试。我不确定

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