如何在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); 
    } 
    });