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>