Kendo UI 工具栏小部件和空的 DropDownList答案

【问题标题】：Kendo UI Toolbar widget and empty DropDownListKendo UI 工具栏小部件和空的 DropDownList
【发布时间】：2014-10-15 01:14:37
【问题描述】：

假设我有带有一些输入的 Kendo Ui 工具栏小部件。工具栏有下拉列表和按钮。通过按钮单击用户可以从下拉列表中删除选定的项目。

每次删除操作后，都会从控制器中再次读取下拉列表数据源。下拉列表刷新得很好，就我删除最后一项而言，一切都很好。当控制器返回空数组时，下拉菜单被破坏。

$(document).ready(function() {
    $("#toolbar").kendoToolBar({
        items: [
            { template: "<label>Demo:</label>" },
            { template: "<input id='my-drop-down' style='width: 150px;' />" }
        ]
    });

    var myDropDown = $("#my-drop-down").kendoDropDownList({
        optionLabel: "Select My Value",
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
            /*
            { text: "Value 1", value: 1 },
            { text: "Value 2", value: 2 },
            { text: "Value 3", value: 3 },
            { text: "Value 4", value: 4 },
            { text: "Value 5", value: 5 },
            */
        ]
    }).data("kendoDropDownList");
});

准备小jsFiddle here

【问题讨论】：

如果没有选项，期望看到什么（视觉上）？您是否尝试过将带有文本的元素留空并禁用它？
好点。至少我希望小部件看起来像一个下拉列表，而不是它的骨架。
这可以接受jsfiddle.net/OnaBai/jr8mnnxL/16吗？

标签： drop-down-menu kendo-ui datasource toolbar

【解决方案1】：

我看到了两种可能的选择：

定义一个样式来控制元素的min-height。
不要删除最新的元素并留下元素，而是将其标记为已禁用。

方案一：简单定义如下样式：

#toolbar .k-dropdown-wrap {
    min-height: 2em;
}

你可以在这里看到这种方法：http://jsfiddle.net/OnaBai/jr8mnnxL/19/

解决方案 2：不要删除最新的元素，而是禁用下拉菜单：

$("#toolbar").kendoToolBar({
    items: [
        { template: "<label>Demo:</label>" },
        { template: "<input id='my-drop-down' style='width: 150px; min-height: ' />" }
    ]
});

var myDropDown = $("#my-drop-down").kendoDropDownList({
    optionLabel: "Select My Value",
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "Fake", value: -1 }
        /*
        { text: "Value 1", value: 1 },
        { text: "Value 2", value: 2 },
        { text: "Value 3", value: 3 },
        { text: "Value 4", value: 4 },
        { text: "Value 5", value: 5 },
        */
    ]
}).data("kendoDropDownList");
myDropDown.enable(false);

我已经创建了一个元素，将text 设置为fake，但这并不重要，因为使用myDropDown.enable(true); / myDropDown.enable(false); 启用/禁用了控件

你可以在这里看到这种方法：http://jsfiddle.net/OnaBai/jr8mnnxL/16/

【讨论】：