Wie erstellt man eine benutzerdefinierte Dropdown-Liste in der Kendo-Grid-Header-Spalte?

Question

Eigentlich meine Anforderung ist benutzerdefinierte Dropdown-Liste in der Spaltenüberschrift von Kendo Grid erstellen möchten. Ich möchte nicht wie nrwant Filter Säule verwenden. Ich möchte nur ein normales Dropdown im Header hinzufügen. Bitte geben Sie ein Beispiel an, damit ich meiner Aufgabe nachgehen kann.

Vielen Dank im Voraus ...

Answer 1

In Ihrer Spaltendefinition eine Eigenschaft wie folgt hinzu:

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

Dann nach dem Raster Initialisierung tun: $ ("# Drop-Down") kendoDropDownList ({. ... Initialisierungsparameter ...});

UPDATE: nach dojo.telerik.com und fügen Sie ihn in den folgenden Code:

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