HeaderTemplate does not render

[Paul]

I  think the title says it all.  No HeaderTemplate shows up in the resulting web page. I also searched the browser debug window to make sure it wasn't just hidden but there. It's not rendered at all:

@(Html.Kendo().DropDownList()
   .Name("CompanyId")
   .DataValueField("Id")
   .DataTextField("Name")
   .BindTo(Model.CompanyList)
   .HtmlAttributes(new { style = "width: 200px; z-index: 10004;" })
   .Height(300)
   .OptionLabel("Select a company")
   .Events(e => e.DataBound("dataBound"))
   .HeaderTemplate("<div>FOO BAR</div>")
   .Template("<span class=\"k-state-default\">" +
                          "<h5 style=\"display: inline-block; width: 190px\">#: data.Name #</h5>&nbsp;&nbsp;" +
                          "<p style=\"display: inline-block; width: 100px\">#if(data.ContactName) {# #=data.ContactName# # } else {# #}#</p>&nbsp;&nbsp;" +
                          "<p style=\"display: inline-block; width: 100px\">#if(data.PhoneFormatted) {# #=data.PhoneFormatted# # } else {# #}#</p>" +
                       "</span>"
   )
)

[Georgi Krustev]

Hello Paul,

I prepared a simple test project in my attempt to replicate the issue, but to no avail. Could you review it and modify it in order to reproduce the problem. Thus I will be able to continue with the investigation.

Regards,
Georgi Krustev
Telerik

[Paul]

I found the issue.  The dependencies listed at http://docs.kendoui.com/getting-started/javascript-dependencies show only the following scripts needed for the DropDownList:
1. kendo.core.js
2. kendo.data.js
3. kendo.popup.js
4. kendo.list.js
5. kendo.dropdownlist.js

I have all of these in my application and more:

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
    "~/Scripts/Kendo/kendo.core.js",
    "~/Scripts/Kendo/kendo.data.js",
    "~/Scripts/Kendo/kendo.aspnetmvc.js",
    "~/Scripts/Kendo/kendo.userevents.js",
    "~/Scripts/Kendo/kendo.draganddrop.js",
    "~/Scripts/Kendo/kendo.calendar.js",
    "~/Scripts/Kendo/kendo.columnmenu.js",
    "~/Scripts/Kendo/kendo.datepicker.js",
    "~/Scripts/Kendo/kendo.filtermenu.js",
    "~/Scripts/Kendo/kendo.grid.js",
    "~/Scripts/Kendo/kendo.groupable.js",
    "~/Scripts/Kendo/kendo.list.js",
    "~/Scripts/Kendo/kendo.menu.js",
    "~/Scripts/Kendo/kendo.numerictextbox.js",
    "~/Scripts/Kendo/kendo.pager.js",
    "~/Scripts/Kendo/kendo.popup.js",
    "~/Scripts/Kendo/kendo.reorderable.js",
    "~/Scripts/Kendo/kendo.resizable.js",
    "~/Scripts/Kendo/kendo.selectable.js",
    "~/Scripts/Kendo/kendo.dropdownlist.js",
    "~/Scripts/Kendo/kendo.sortable.js",
    "~/Scripts/Kendo/kendo.window.js"));

When I instead register "kendo.all.js", it works as expected.  So the dependencies listed on the site are not correct.  Can you tell me what else is needed?

[Paul]

Besides that issue, the scroll bar is instantly messed up when the header template gets inserted.  See photo.

[Georgi Krustev]

Hello again Paul,

I modified my test project to use bundles and still widget renders the header template correctly. Check the attached archive. As to your second question, currently the widget does not styles the list and that is why the options are pushed down. As it is shown in the demo you need to add padding-bottom to the popup:

<style>
    #CompanyId-list {
        padding-bottom: 26px;
    }
</style>

This will be improved in the next internal build of Kendo UI.

Regards,
Georgi Krustev
Telerik