剣道グリッドヘッダー列にカスタムドロップダウンリストを作成するには？

Question

実際に私の要件は、剣道グリッドの列ヘッダーにカスタムドロップダウンリストを作成することです。私はフィルターカラムを使用するのに苦労しない。ヘッダーに通常のドロップダウンを追加したいだけです。私の仕事に前進できるように、そのような例を挙げてください。あなたの列の定義で

事前のおかげで...

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); 
    } 
    });