Dropdown Multi Column and Blank Item

[Jonathan]

How do I create a DropDownList with a blank item as well as multi column template?
   

var ticketType = $("#TicketType").kendoDropDownList
({
    optionLabel: " ",
    dataTextField: "TicketTypeName",
    dataValueField: "TicketTypeId",
    dataSource:
    {
        serverFiltering: true,
        type: "jsonp",
        transport:
        {
            read:
            {
                url: "../Service/IncidentManagement.asmx/GetTicketTypeList",
                contentType: "application/json; charset=utf-8",
                type: "POST"
            }
        },
        schema:
        {
            data: "d"
        }
    },
    template: "<div><span>${TicketTypeName}</span><span>${TicketTypeDescription}</span></div>"
}).data("kendoDropDownList");

The above produces the error Uncaught ReferenceError: TicketTypeDescription is not defined.

If I remove the optionLabel then it displays fine, but without the empty entry.
If I remove the template then it displays fine, but without multi column. 

[Kiril Nikolov]

Hi Jonathan,

The problem comes from the fact that the optionLabel does not know about the other properties of the data object. So you need to set some values, even empty ones, in order to work correctly. Please check the following example:

http://jsbin.com/habapuse/4/edit

It is explained in the following article:

http://docs.telerik.com/kendo-ui/api/web/dropdownlist#configuration-optionLabel

Regards,
Kiril Nikolov
Telerik

 

 

[Jonathan]

Thanks Kiril, works like a charm.

[Kiril Nikolov]

Hi Jonathan,

I am glad I helped.

In case you have any further questions please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik