Kendo UI - 下拉列表设置值 autoBind = false 设置

Question

我现在正在评估 kendo ui 以在我们的大型应用程序中使用。我们有一种情况，我们在下拉列表中有很多值（例如 200+），并且有超过 1 个具有该大小的下拉列表。所以如果我们有一个复杂的形式。页面加载需要时间来呈现表单。 （由于每个盒子都需要从服务中加载并填满）。

我们通过在 kendo ui 的下拉列表中编写自己的带有按需支持（如 autoBind 属性）的 asp.net Web 控件来避免这种情况。

现在，来自 KendoUI 的 DropDownList 使用 autobind = false 来达到目的，但是在设置值时，它首先从远程绑定中获取数据，然后选择适当的值。 （这很酷，非常适合小型列表）但是这可能意味着当我们加载页面并设置值时，它将为每个下拉列表发出远程绑定调用。

现在，

我们可以在不发出远程绑定的情况下设置值/文本出现吗？我们希望仅在用户单击下拉菜单时才进行远程绑定。 （不是在我们填写表格时）。这将节省对系统的额外调用，并有助于快速将表单呈现给用户。

这里是JS Bin

http://jsbin.com/ayivad/3/edit

如果来自 kendo ui 的人希望我帮忙 - 请告诉我，但这个想法将使我们能够很好地使用 kendo ui 下拉菜单。

<input type="button" id="btnSet" value="Set Value (Click without clicking on DropDown" />
  <br/><br/>
<select id="products"></select>



 $(document).ready(function () {
        $("#products").kendoDropDownList({
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        dataType: "jsonp",
                        url: "http://demos.kendoui.com/service/Products",
                    }
                }
            }
        });
        var combobox = $("#products").data("kendoDropDownList"),
        setValue = function (e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                combobox.value(3);
        };
       $("#btnSet").click(setValue);
    });

谢谢， 里兹

Answer 1

1) 设置文本而不是值：http://docs.kendoui.com/api/web/dropdownlist#configuration-text

剑道： 文本字符串（默认：“”） 当 autoBind 设置为 false 时，定义小部件的文本。 示例

$("#dropdownlist").kendoDropDownList({
     autoBind: false,
     text: "Chai"
});

肮脏的替代方案 - 尝试根据您的需要劫持 ddl“可选标签”。为页面加载数据，包括要在 ddl 上显示的值，然后使用等于要显示的值的可选值初始化 ddl。用户打开 ddl 后，将加载远程数据，一旦加载数据，您将覆盖/删除可选标签和快乐的日子。 http://docs.kendoui.com/api/web/dropdownlist#configuration-optionLabel （考虑拆分列表，200 长让我们远离用户友好。）

$("#dropdownlist").kendoDropDownList({
optionLabel: "My value" });

还可以考虑使用 Kendo ComboBox，毕竟在 3 个字符左右后自动完成对于您的 200 个项目来说是非常明智的解决方案。我们对 500 + 组合框使用相同的解决方案。