Шаблон Kendo DropDownList с пустым элементом

Я пытаюсь использовать Kendo DropDownList и предоставить пустой элемент в верхней части списка, а также использовать шаблон для предоставления нескольких столбцов.

   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");

Вышеизложенное производит

Uncaught ReferenceError: TicketTypeDescription не определен

Если у меня нет optionLabel, указанного ниже, выпадающий список работает нормально (без пустого элемента).

Если у меня указан optionLabel и удален параметр шаблона, он работает нормально (без нескольких столбцов).

Есть ли способ проверить, не определено ли оно в шаблоне? Что-то вроде:

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

multiple-columns kendo-ui kendo-dropdown
person jzacharuk    schedule 19.06.2014    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Согласно ответу Телерика:

Проблема возникает из-за того, что optionLabel не знает о других свойствах объекта данных. Поэтому вам нужно установить некоторые значения, даже пустые, чтобы работать правильно.

Итак, optionLabel необходимо указать следующим образом:

optionLabel: {
          TicketTypeName: " ",
          TicketTypeId: "",
          TicketTypeDescription: ""
        }
person jzacharuk    schedule 30.06.2014

arrow_upward
0
arrow_downward

Вы близко; но используйте знаки #, чтобы указать Кендо, где javascript и их шаблон синтаксис начинается и заканчивается. Попробуй это:

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

# позволяет вам вставлять javascript в ваш html. Кроме того, #: автоматически html кодирует содержимое, на всякий случай, если это важно для вас. В противном случае вы можете использовать #= для того же результата.

Кроме того, очевидно, что вам не нужны элементы span, но они могут быть полезны, если вы хотите каким-то образом украсить или стилизовать вложенные значения.

person Nick DeVore    schedule 19.06.2014

arrow_upward
0
arrow_downward

Вы можете попробовать #: data && data.TicketTypeDescription #

Также не используйте синтаксис ${}, он устарел.

person Petur Subev    schedule 20.06.2014