Kendo ListBox模板中DropDownList打开后立即关闭的问题

问题描述 #

拥有两个关联的Telerik ListBox组件，第一个ListBox的列表项模板中包含独立DropDownList。拖拽功能、列表及DropDownList的数据填充均正常，但点击DropDownList时弹窗会立即关闭，无法选择值；仅通过键盘（Tab+空格）可正常打开并选择。将DropDownList替换为MultiSelect后问题依旧。

ListBox核心代码：

<div id="example" >
    <div class="demo-section wide">
        @(Html.Kendo().ListBox()
        .Name("optional")
        .DataTextField("Name")
        .DataValueField("SysName")
        .DataSource(source => source
            .Read(read => read.Action("FiltersList_Read", "Links"))
        )
        .TemplateId("customer-item-template")
        .Draggable(draggable => draggable.Placeholder("customPlaceholder"))
        .DropSources("selected")
        .ConnectWith("selected")
        .Toolbar(toolbar =>
        {
            toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
            toolbar.Tools(tools => tools
                .MoveUp()
                .MoveDown()
                .TransferTo()
                .TransferFrom()
                .TransferAllTo()
                .TransferAllFrom()
                .Remove());
        })
    )
        @(Html.Kendo().ListBox()
        .Name("selected")
        .DataTextField("Name")
        .DataValueField("SysName")
        .TemplateId("customer-item-template")
        .Draggable(draggable => draggable.Placeholder("customPlaceholder"))
        .DropSources("optional")
        .ConnectWith("optional")
        .BindTo(new List<FilterList>())
    )
    </div>
</div>

原因分析 #

ListBox的拖拽功能会监听列表项的mousedown事件，当点击DropDownList的触发区域时，该事件会向上冒泡至ListBox的列表项，触发拖拽初始化逻辑，干扰了DropDownList的Popup组件的显示流程，导致弹窗被立即关闭。

解决方案 #

在DropDownList所在的容器元素上添加事件处理，阻止mousedown事件向上冒泡，避免触发ListBox的拖拽相关逻辑。

修改后的列表项模板代码 #

<script id="customer-item-template" type="text/kendo-template">
    <div>
        <span class="k-state-default"><h3>#: data.Name #</h3><p>#: data.SysName #</p></span>
        <!-- 添加事件阻止冒泡，避免触发ListBox拖拽逻辑 -->
        <div id="div_#=SysName#" onmousedown="event.stopPropagation();">
                @(Html.Kendo().DropDownList()
                    .Name("ddl_#=SysName#")
                    .DataTextField("Name")
                    .DataValueField("ItemId")
                    .DataSource(source => source
                        .Read(read => read.Action("Filter_Read", "Links", new { FilterSysName = "#=SysName#" }))
                    )
                    .HtmlAttributes(new { style = "width:100%;" })
                    .Popup(x=>x.AppendTo("div_#=SysName#"))
                    .ToClientTemplate()
                )
        </div>
    </div>
</script>

补充说明 #

• 将Popup的AppendTo目标改为DropDownList的外层div，可避免Popup被其他元素遮挡或层级异常，提升组件稳定性。
• 阻止mousedown事件冒泡仅作用于DropDownList所在区域，ListBox列表项的其他区域仍可正常触发拖拽，不影响原有功能。

若偏好非内联事件的写法，可添加以下jQuery脚本：

$(document).on("mousedown", "[id^='div_']", function(e) {
    e.stopPropagation();
});

内容的提问来源于stack exchange，提问作者lcnw