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

Question

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

在此先感谢...

Answer 1

在你列定义添加一个属性是这样的：

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

然后网格初始化后做： $（ “＃下拉列表”）kendoDropDownList（{。 ... init参数...}）;

UPDATE：去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); 
    } 
    });