New to Kendo UI for jQuery? Download free 30-day trial

Render Embedded Tables in DropDownLists


Product Progress® Kendo UI® DropDownList for jQuery
Operating System All
Browser All
Preferred Language JavaScript


How can I display a table inside a DropDownList?


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">
            <tr class="combo-tr">
                <td class="combo-td">${band}</td>
                <td class="combo-td">${song}</td>
            <td class="combo-td">${album}</td>

            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" }

                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>
                template: kendo.template($("#template").html())



            font-weight: bold;
In this article