CODEWITHSUNDEEP
kendo-uimultiple-columnskendo-dropdown
jzacharuk
jzacharuk

Reputation: 2116

Kendo DropDownList Template with Blank Item

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>

Upvotes: 2

Views: 5216

Answers (3)

jzacharuk
jzacharuk

Reputation: 2116

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: ""
        }

Upvotes: 2

Petur Subev
Petur Subev

Reputation: 20233

You can try #: data && data.TicketTypeDescription #

Also do not use the ${} syntax, it is deprecated.

Upvotes: 0

Nick DeVore
Nick DeVore

Reputation: 10176

You are close; but use # signs to tell Kendo where javascript and their template syntax starts and ends. Try this:

# if (TicketTypeDescription !== undefined) { #
    <span>&nbsp;</span>
# } else { #
    <span>#: TicketTypeDescription #</span>
# } #

The # lets you intersperse javascript within your html. Also, the #: automatically html encodes the content, just incase that is important to you. Otherwise, you can use #= for the same result.

Also, obviously you don't need the span elements but they can be helpful if you want to somehow decorate or style the enclosed values.

Upvotes: 0

Related Questions