列中带有 DropDown 的剑道网格弄乱了样式答案

【问题标题】：Kendo grid with DropDown in column has messed up styling列中带有 DropDown 的剑道网格弄乱了样式
【发布时间】：2014-10-09 05:25:45
【问题描述】：

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

实际上，我确实让 downdown 编辑器在添加/编辑模式下工作，并且绑定了 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 标签。为什么有两个输入标签？？？

【问题讨论】：

标签： angularjs kendo-ui kendo-grid

【解决方案1】：

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

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

【讨论】：

很抱歉，没有任何区别。我用 f12 控制台工具刷新了，但没有区别。
对不起，伙计.. 一定是干扰了您的代码库的中间部分。