剑道格在列下拉列表中已经搞砸了造型 [英] Kendo grid with DropDown in column has messed up styling

问题描述

我已经迷上了网格列中下拉编辑，我在这里跟着剑道例如：
http://demos.telerik.com/kendo-ui/grid/editing-custom

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

其实我确实有downdown编辑器添加/编辑模式下工作，并绑定到它的数据源。不过，我想不通为什么造型是全乱了。

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.

所有出现在我的plunker例如， HTTP的造型罚款：// plnkr。 CO /编辑/ mxBYYerPLazQwctQkDjS？p = preVIEW 的，但不是我真正的项目code。

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

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

我的角度控制器code：

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

我也想表现什么样的Insepect元素看起来LIK在Chrome中的图像。事实上，一些怪异的行为在这里;看到SPAN里面的SPAN。而每个SPAN标记内有一个INPUT标记。
为什么两个输入标签???

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 ???

推荐答案

从列取模板关闭和尝试。我不知道，虽然

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

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

这篇关于剑道格在列下拉列表中已经搞砸了造型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！