劍道網 - 做一個欄始終顯示爲下拉框

Question

我有這是在JS創建一個劍道網格。這個代碼不是我的，而是別人的，我真的不認爲我們應該改變它的許多基礎。但是，其中有一列，我們希望始終顯示爲下拉框，或者至少看起來像一個。代碼如下：

self.caGridOptions = { 
     widget: self.caKendoGrid, 
     data: undefined, 
     dataSource: { 
      schema: { 
       model: { 
        fields: { 
         id: { type: "number" }, 
         description: { type: "string", editable: false }, 
         value: { type: "number", editable: false }, 
         caTypeDescription: { type: "string", editable: false } 
        } 
       } 
      }, 
      autoSync: true 
     }, 
     sortable: true, 
     scrollable: false, 
     editable: true, 
     columns: [ 
       { field: "id", title: "Code", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'code') : id #", editor: self.caDropDownEditor }, 
       { field: "description", title: "Description", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'description') : id #" }, 
       { field: "value", title: "Value", width: 90, format: "{0:n2}", template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'value') : id #" }, 
       { field: "caTypeDescription", title: "Type", width: 90, template: "#=pager.activePage$().ctx.getca ? pager.activePage$().ctx.getca(id, 'caTypeDescription') : id #" }, 
       { width: 90, filterable: false, template: kendo.template('<a class="btn btn-danger btn-sm" title="delete"><i class="fa fa-trash-o fa-fw" aria-hidden="true"></i>&nbsp;Delete</a>') } 
     ], 
     dataBound: self.gridButtons, 
     noRecords: true, 
     messages: { 
      noRecords: "There is no data available" 
     } 
    }; 
    // 
    // functions 
    self.getca = function (id, type) { 
     if (id == null) return null; 
     return self.caOptions().filter(function (item) { return item.id == id; })[0][type]; 
    }; 

編輯時，ID字段（第一列）進入下拉框，如您所見。但是，我們希望這會始終顯示爲下拉框。不一定總是擁有編輯器（我相信這是不可能的，因爲Kendo只能一次將編輯器打開），但也許只需簡單地將其格式化爲下拉菜單即可。

任何幫助將不勝感激。這很煩人，因爲這是一個很小的，小的事情，我們已經得到了其他地方工作的這樣的例子，但他們已在CSHTML主要寫網格（使用MVC劍道，我認爲），我真的不希望重寫整個網格中的東西如此微不足道，以及可能依賴於其數據的任何其他功能。

Answer 1

你所面臨的主要問題是電池只是一個表格單元格，直到你真正開始編輯。那時，它動態地創建輸入。

我在過去類似的要求，它結束了更容易裝點細胞看起來像一個下拉菜單，而不是試圖使電網的每一行的下拉。這可以讓您保持默認網格行爲不變，並允許用戶在編輯該單元格時看到值列表。我們最終只是在顯示模板的右側放置了一個向下箭頭圖標 - 從您的代碼中，它看起來像使用了一些字體超棒的圖標，但也有一些由Kendo UI交付 - 所以，模板可以是這樣的：

template: '#=id# <span class="k-icon k-icon-s"></span>' 

UPDATE：

劍道圖標都取決於你的版本，我已經在上面的名稱的拼寫錯誤。在任何情況下，這裏有一個例子，你可以看看：

這劍道演示展示了將在分類欄自定義編輯器（下拉菜單）：

http://demos.telerik.com/kendo-ui/grid/editing-custom

如果向下滾動，有按鈕「編輯本示例」 - 在這裏，你會看到類別列使用模板：

template: "#=Category.CategoryName#" 

您可以將模板更改爲以下創建一個下拉看效果：

template: "<span style='border-style:solid; border-width: 1px; padding: 4px; width: 150px; display: block'>#=Category.CategoryName# <span class='k-icon k-i-arrow-60-down' style='float:right'></span></span>" 

您可以調整CSS讓它更接近你想要的，但是這給了你這個想法。其他可能性包括實際定義可以應用的CSS類，因此您不需要包含太多的線內樣式。