2014-10-08 92 views
0

我已經迷上了一個網格列內一個下拉編輯,我已經試過了劍道例子在這裏: http://demos.telerik.com/kendo-ui/grid/editing-custom在列下拉列表劍道電網已搞砸了造型

其實我確實有downdown編輯工作在添加/編輯模式下,並綁定到它的數據源。但是,我無法弄清楚爲什麼樣式都搞砸了。

正如你可以下面的圖片中看到,下拉菜單呈現,但也有它下面呈現的文本框中。

所有出現在我的plunker例如被造型精美,http://plnkr.co/edit/mxBYYerPLazQwctQkDjS?p=preview,但不是我真正的項目代碼。

Grid with messed up styling in Add/Edit mode

Clean looking grid

Messed up grid styling

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

我也想展示Chrome瀏覽器中Insepect Elements的外觀。確實在這裏有一些奇怪的行爲;請參閱SPAN內的SPAN。在每個SPAN標籤內都有一個INPUT標籤。 爲什麼兩個輸入標籤???

enter image description here

回答

1

從列取模板關閉和嘗試。我不確定

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

對不起,沒有任何區別。我用f12控制檯工具刷新了,但沒有區別。 – 2014-10-08 21:14:51

+0

對不起隊友...必須是干擾你的代碼庫中間的東西。 – Mahib 2014-10-12 10:00:13