Kendo Multiselect渲染大量本地数据时如何展示加载Spinner

Kendo UI原生没有直接暴露列表渲染阶段的专用钩子，但可以通过组件事件结合DOM检测逻辑实现需求，以下是可直接落地的实现方案：

实现思路 #

• 完全自定义控制Spinner的显隐，避开组件原生绑定远程请求的Spinner逻辑
• 用Multiselect的open事件作为下拉列表渲染开始的触发节点
• 通过定时检测下拉列表渲染的DOM节点数量和数据源总长度是否匹配，判断渲染完成时机，自动关闭Spinner

代码示例（基于jQuery版Kendo UI） #

// 提前初始化符合Kendo UI设计规范的Spinner元素
const customSpinner = $("<div class='k-loading-mask' style='width:100%;height:100%;position:absolute;top:0;left:0;z-index:1000'><span class='k-loading-text'>加载中...</span><div class='k-loading-image'/><div class='k-loading-color'/></div>")

$("#yourMultiselectId").kendoMultiSelect({
  dataSource: yourLocalFullDataSource, // 已经预加载完成的本地200+条数据
  dataTextField: "name",
  dataValueField: "id",
  open: function(e) {
    // 下拉框打开时插入Spinner，此时组件开始渲染列表项
    e.sender.wrapper.append(customSpinner);
    // 异步启动渲染完成检测
    setTimeout(checkRenderFinish, 50, e.sender);
  }
});

function checkRenderFinish(multiselectInstance) {
  // 获取已渲染的列表项DOM节点
  const renderedItems = multiselectInstance.ul.children("li");
  // 已渲染节点数和数据源总量一致则说明渲染完成
  if (renderedItems.length === multiselectInstance.dataSource.data().length) {
    customSpinner.remove();
    return;
  }
  // 未完成则间隔50ms再次检测
  setTimeout(checkRenderFinish, 50, multiselectInstance);
}

适配场景说明 #

• 如果你的组件开启了虚拟滚动（virtualization），可调整判断逻辑为检测可视区渲染条目数符合预期即可，不需要匹配全量数据源长度
• Spinner的样式可根据项目UI自行调整，不需要和示例完全一致
• 如果使用Angular/React/Vue版本的Kendo UI组件，逻辑完全通用，只需要替换为对应框架的内置Spinner组件和事件绑定语法即可

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