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

Question

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

提前致谢...

Answer 1

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

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

然后在网格初始化之后执行：$（“＃dropdown”）。kendoDropDownList（{... init parameters ...}）;

更新：转到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);
    }
  });