Kendo DropDownList Template with Blank Item

Question

I am trying to use a Kendo DropDownList and provide a blank item at the top of the list, as well as use a template to provide multiple columns.

   var ticketType = $("#TicketType").kendoDropDownList
({

    dataTextField: "TicketTypeName",
    dataValueField: "TicketTypeId",
    optionLabel: " ", //This should add a blank item, but errors out instead.
    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

Uncaught ReferenceError: TicketTypeDescription is not defined

If I do not have the optionLabel specified below then the dropdown works fine (without an empty item).

If I have the optionLabel specified and remove the template option then it works fine (without multiple columns).

Is there some way I can check to see if it is undefined within the template? Something along the lines of:

<span>${TicketTypeDescription} !== undefined ? ${TicketTypeDescription} : '' </span>

Answer 1

As per a response from Telerik:

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.

So, the optionLabel needs to be specified as follows:

optionLabel: {
          TicketTypeName: " ",
          TicketTypeId: "",
          TicketTypeDescription: ""
        }