Kendo MVC 下拉列表 - 空白 space 删除选项标签时

Question

当用户在 kendo 的下拉菜单中选择任何选项时，我将删除选项标签。在一些下拉菜单中有 white/blank space 而不是删除的选项标签。看起来像： screen

下拉代码：

@(Html.Kendo().DropDownList()
    .Name("apps")
    .DataTextField("Name")
    .DataValueField("Id")
    .OptionLabel("Please select a software")
    .BindTo(Model.Apps)
    .Events(e => {
        e.Close("onCloseDropdown");
    })
    .HtmlAttributes(new { id = "ddApps", style = "width: 30%" })
)

onCloseDropdown:

function onCloseDropdown() {
    var val = $('#ddApps').val();

    if (val !== "") {
        this.element.getKendoDropDownList().list.find('.k-list-optionlabel').remove();
    }
    else {
        return;
    }
    (...)
}

我注意到当没有太多选项并且禁用滚动时，问题不会出现。当我有很多选项并启用滚动时，我想 kendo 需要以某种方式调整大小以在删除选项标签后固定高度

Answer 1

尝试隐藏选项标签条目而不是将其删除 - 像这样：

function onCloseDropdown() {
    var val = $('#ddApps').val();

    if (val !== "") {
        this.element.getKendoDropDownList().list.find(".k-list-optionlabel").hide();
    }
    else {
        return;
    }
    (...)
}

此外，根据您的使用情况，由于您只在关闭下拉菜单时删除选项标签，如果您有一个视图，其中下拉菜单在加载时填充了一个选择，它仍然会有选项标签.如果你不想，你可以从 dataBound 事件中调用相同的隐藏选项标签代码

编辑：

另一种选择是像您一样删除代码，然后像这样刷新下拉列表：

function onCloseDropdown() {
    var val = $('#ddApps').val();

    if (val !== "") {
        this.element.getKendoDropDownList().list.find('.k-list-optionlabel').remove();
        this.element.getKendoDropDownList().refresh();
    }
    else {
        return;
    }
    (...)
}

Kendo MVC 下拉列表 - 空白 space 删除选项标签时

Kendo MVC dropdown - blank space when option label remove

c#

kendo-ui