Render Embedded Tables in DropDownLists
Environment
Product | Progress® Kendo UI® DropDownList for jQuery |
Operating System | All |
Browser | All |
Preferred Language | JavaScript |
Description
How can I display a table inside a DropDownList?
Solution
Use a template for each row of the table and utilize the headerTemplate
to customize the header of the embedded Grid.
<input id="dropdownlist" />
<script id="template" type="text/x-kendo-template">
<table>
<tr class="combo-tr">
<td class="combo-td">${band}</td>
<td class="combo-td">${song}</td>
<td class="combo-td">${album}</td>
</tr>
</table>
</script>
<script>
var data = [
{ id: 1, band: "Iron Maiden", song: "Wasted Years", album: "Ed Hunter" },
{ id: 2, band: "Metallica", song: "Enter Eandman", album: "Metallica" },
{ id: 3, band: "Mr. Big", song: "Seven Impossible Days", album: "Japandemonium" },
{ id: 4, band: "Unknown Band", song: "Some Song", album: "The Album" }
];
$("#dropdownlist").kendoDropDownList({
optionLabel: "Please select a band...",
dataSource: data,
dataTextField: "band",
dataValueField: "id",
autoWidth: true,
headerTemplate: `<table>
<tr class="combo-tr">
<td class="combo-hd-td">Band</td>
<td class="combo-hd-td">Song</td>
<td class="combo-hd-td">Album</td>
</tr>
</table>`,
template: kendo.template($("#template").html())
});
</script>
<style>
.combo-td{
width:150px;
}
.combo-hd-td{
width:150px;
font-weight: bold;
}
</style>