Kendo Grid展开列触发页面刷新：关联事件及阻止加载方法问询

嘿，我之前也踩过Kendo Grid展开操作导致页面刷新的坑，大概率和你触发展开的方式以及事件处理有关，咱们来拆解一下：

是不是和Grid事件有关？ #

答案是：是，但不是Grid内置的expand事件本身。Kendo Grid原生的行/列展开逻辑是不会触发页面刷新的，问题出在你自定义的「展开触发元素」的事件处理上——比如你用了按钮、链接来触发展开函数，这些元素的默认行为（比如表单提交、链接跳转）导致了页面刷新。

涉及哪个事件？ #

最常见的是触发展开的元素（比如自定义按钮、<a>标签）的**click事件**。举两个典型场景：

• 如果你的展开按钮放在<form>标签内，且没指定type="button"，点击时会默认触发submit事件，导致表单提交页面刷新；
• 如果用了<a href="#">这类链接触发展开，点击时会触发浏览器的锚点跳转行为，部分场景下会导致页面重新加载（尤其是如果href属性设置不当的话）。

如何阻止页面刷新？ #

这里给你几个针对性的解决方案，按推荐程度排序：

1. 用Kendo Grid命令列定义展开按钮（最稳妥）
   直接用Grid的command列来创建展开按钮，Kendo会帮你处理事件绑定，避免默认行为：

   $("#yourGridId").kendoGrid({
       columns: [
           // 其他列...
           {
               command: [{
                   name: "expandColumnA",
                   text: "展开列A",
                   click: function(e) {
                       // 先阻止默认行为，双重保险
                       e.preventDefault();
                       // 获取当前行的数据项
                       const tr = $(e.target).closest("tr");
                       const dataItem = this.dataItem(tr);
                       // 执行你的展开逻辑：比如将A拆分为B+C，更新数据后刷新Grid
                       dataItem.B = 10; // 示例赋值
                       dataItem.C = 20;
                       this.refresh();
                   }
               }]
           }
       ],
       // 其他Grid配置...
   });
   

2. 给自定义触发元素阻止默认行为
   如果是自己写的按钮或链接，在点击事件里必须加上event.preventDefault()：

   // 假设你的展开按钮有类名expand-btn
   $(document).on("click", ".expand-btn", function(e) {
       // 关键：阻止浏览器默认行为（表单提交/链接跳转）
       e.preventDefault();
       // 执行你的展开逻辑
       yourExpandFunction();
   });
   

3. 修正表单内的按钮类型
   如果Grid在<form>标签里，普通按钮默认是type="submit"，会触发表单提交。只要把按钮类型改成type="button"就行：

   <button type="button" class="expand-btn">展开列A</button>
   

4. 避免用<a>标签做触发按钮
   如果之前用了<a>标签，要么换成<button>，要么把href设为javascript:void(0)并阻止默认行为：

   <a href="javascript:void(0)" class="expand-btn">展开列A</a>
   

总的来说，核心就是阻止触发展开操作的元素的浏览器默认行为，因为Kendo Grid本身的展开逻辑不会导致页面刷新，问题都出在自定义触发元素的事件处理上。

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