This is a migrated thread and some comments may be shown as answers.

HeaderTemplate does not render

4 Answers 71 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 04 Dec 2013, 10:28 PM
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>"
   )
)

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 05 Dec 2013, 10:29 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Paul
Top achievements
Rank 1
answered on 05 Dec 2013, 03:05 PM
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?


0
Paul
Top achievements
Rank 1
answered on 05 Dec 2013, 06:36 PM
Besides that issue, the scroll bar is instantly messed up when the header template gets inserted.  See photo.
0
Georgi Krustev
Telerik team
answered on 09 Dec 2013, 12:49 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
DropDownList
Asked by
Paul
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Paul
Top achievements
Rank 1
Share this question
or