使用模板时,我如何以编程方式设置剑道下拉列表文本

how can I set kendo dropdownlist text programatically when using a template?

本文关键字:设置 方式 编程 文本 下拉列表      更新时间:2023-09-26

我有这个下拉列表

        $("#rooms").kendoDropDownList({
            template: kendo.template($("#roomsListTemplate").html()),
            valueTemplate: kendo.template($("#roomsSelectTemplate").html()),
            filter: "contains",
            dataTextField: "room",
            dataValueField: "id",
            dataSource: roomsList,
            index: 0,
            select: onSelectRoom
        });
        var rooms = $("#rooms").data("kendoDropDownList");
使用此模板的

            <script id="roomsSelectTemplate" type="text/x-kendo-template">
                <span class="roomName">
                #if (room != 'null' && room != '')  { #
                     #=room# 
                # } #
                #if (availability == 'roomOk')  { #
                    - Available
                # } #
                </span>
            </script>

现在我希望能够以编程方式设置下拉列表文本。我正在尝试:

        rooms.text("Select a room...");

这在另一个模板只有一个值的下拉列表上工作正常,但是这个下拉列表有两个值(roomavailability)。

Firebug抛出"ReferenceError: availability is not defined",所以问题肯定是模板期望得到 availability

的值。

我试过了

    rooms.text("Select a room...","Something here");

但是同样的结果和Firebug的错误信息…

你可以在这里看到这两种行为http://jsfiddle.net/pmeconi/jr2kgvsd/1/

当模板上有多个值时,如何使其工作?

提前感谢!

我不知道这是否适用于您的设置,但您可以使用"optionLabel"属性为您的下拉菜单,然后选择0元素。

看看你的小提琴,我稍微修改了一下。

$("#rooms2").kendoDropDownList({
    template: kendo.template($("#roomsListTemplate2").html()),
    valueTemplate: kendo.template($("#roomsSelectTemplate2").html()),
    filter: "contains",
    dataTextField: "room",
    dataValueField: "id",
    optionLabel: "Select room",
    dataSource: roomsList,
    index: 0
});

$("#changeText2").click(function(e) {
    rooms2.select(0);
});
http://jsfiddle.net/jr2kgvsd/2/