Question

我正在尝试使用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");

以上产生

未捕获的ReferenceError：未定义TicketTypeDescription

如果我没有在下面指定optionLabel，那么下拉列表工作正常（没有空项目）。

如果我指定了optionLabel并删除了模板选项，那么它可以正常工作（没有多列）。

我是否有某种方法可以检查模板中是否未定义？有点像：

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

Answer 1

根据Telerik的回复：

问题来自于optionLabel不知道的事实关于数据对象的其他属性。所以你需要设置一些值，甚至是空值，以便正常工作。

因此，需要按如下方式指定optionLabel：

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

Answer 2

你很亲密;但使用＃符号来tell Kendo where javascript and their template语法开始和结束。试试这个：

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

＃允许你在你的html中散布javascript。此外，＃：自动html对内容进行编码，只是对你很重要。否则，您可以使用#=获得相同的结果。

另外，显然你不需要span元素，但如果你想以某种方式装饰或设置所附值的样式，它们会很有帮助。

Answer 3

您可以尝试＃：data＆amp;＆amp; data.TicketTypeDescription＃

也不要使用$ {}语法，不推荐使用。

带有空白项的Kendo DropDownList模板

3 个答案: