剑道网 - 做一个栏始终显示为下拉框

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类，因此您不需要包含太多的线内样式。