如何在剑道网格标题列中创建自定义下拉列表？

Question

实际上我的要求是想在剑道网格的列标题中创建自定义下拉列表。我不喜欢使用过滤器列。我只想在标题中添加正常的下拉菜单。请提供任何这样的例子，以便我可以继续我的任务。

提前谢谢...

Answer 1

在您的列定义中添加如下属性：

headerTemplate: '<input id="dropdown" />'

然后在您的网格初始化之后： $("#dropdown").kendoDropDownList({...init 参数...});

更新：访问 dojo.telerik.com 并粘贴以下代码：

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { 
      field: "ProductName", 
      title: "Product Name",
      headerTemplate: '<input id="dropdown" />'
    },
    { field: "UnitPrice", title: "Price", template: 'Price: #: kendo.format("{0:c}", UnitPrice)#' }
  ],
  pageable: true,
  dataSource: {
    transport: {
      read: {
        url: "http://demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp"
      }
    },
    pageSize: 10
  },
  excelExport: function(e) {
    var sheet = e.workbook.sheets[0];
    var template = kendo.template(this.columns[1].template);

    for (var i = 1; i < sheet.rows.length; i++) {
      var row = sheet.rows[i];

      var dataItem = {
         UnitPrice: row.cells[1].value
      };

      row.cells[1].value = template(dataItem);
    }
  }
});

  $("#dropdown").kendoDropDownList({
    optionLabel: 'Choose a value...',
    dataTextField: 'description',
    dataValueField: 'id',
    dataSource:{
       data: [{id: 1, description: 'One'},{id: 2, description: 'Two'}]
    },
    change: function(e){
      //do whatever you need here, for example:
      var theGrid = $("#grid").getKendoGrid();
      var theData = theGrid.dataSource.data();
      $(theData).each(function(index,item){
        item.ProductName = e.sender.text();
      });
      theGrid.dataSource.data(theData);
    }
  });