Kendo UI ASP.NET MVC：如何为整个网格而非内容区域添加加载遮罩

嘿，作为ASP.NET和JS新手遇到这个问题很正常，我来一步步帮你搞定！你说的这个默认遮罩只覆盖网格内容区的情况确实是老版本Kendo UI的默认行为，而且不用修改kendo.all.min.js就能全局实现全网格覆盖的效果，下面给你两种靠谱的方法：

方法一：通过全局事件监听调整遮罩位置 #

这个方法是监听所有网格的加载开始和结束事件，手动把遮罩移到整个网格容器上，适合不想改动组件原型的情况：

1. 找到你的全局布局文件（比如_Layout.cshtml），在kendo.all.min.js引用之后添加这段脚本：

$(document).ready(function() {
    // 监听所有网格的加载开始事件（dataBinding）
    $(document).on("dataBinding", ".k-grid", function() {
        var grid = $(this).data("kendoGrid");
        // 找到默认生成的加载遮罩
        var loadingMask = grid.wrapper.find(".k-loading-mask");
        
        if (loadingMask.length) {
            // 把遮罩从内容区移到网格主容器
            loadingMask.appendTo(grid.wrapper);
            // 调整样式让它覆盖整个网格
            loadingMask.css({
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%"
            });
        } else {
            // 万一默认遮罩没生成，手动创建一个
            var mask = $('<div class="k-loading-mask"></div>').appendTo(grid.wrapper);
            $('<div class="k-loading-image"></div>').appendTo(mask);
            mask.css({
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                opacity: 0.7,
                backgroundColor: "#ffffff"
            });
        }
    });

    // 监听加载完成事件（dataBound），移除遮罩
    $(document).on("dataBound", ".k-grid", function() {
        var grid = $(this).data("kendoGrid");
        grid.wrapper.find(".k-loading-mask").remove();
    });
});

这段代码会自动对所有.k-grid元素生效，不管是哪个页面的网格，刷新时都会用覆盖整个网格的遮罩，防止用户点击分页、表头或者链接。

方法二：重写Kendo Grid的加载方法（更彻底） #

如果方法一的效果不够稳定，你可以直接重写Kendo Grid的showLoading和hideLoading原型方法，从根源上改变遮罩的挂载位置：

同样在kendo.all.min.js之后添加这段脚本（注意要放在$(document).ready()外面，或者ready之前）：

// 重写Grid的showLoading方法
kendo.ui.Grid.fn.showLoading = function() {
    // 先调用原方法生成基础遮罩
    var originalShow = kendo.ui.Grid.fn.showLoading;
    originalShow.call(this);
    
    // 调整遮罩到网格主容器
    var loadingMask = this.wrapper.find(".k-loading-mask");
    loadingMask.appendTo(this.wrapper);
    loadingMask.css({
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%"
    });
};

// 重写hideLoading方法确保遮罩被正确移除
kendo.ui.Grid.fn.hideLoading = function() {
    this.wrapper.find(".k-loading-mask").remove();
};

这个方法相当于修改了所有Kendo Grid的默认加载行为，比事件监听更直接，适合所有场景。

为什么之前页面内脚本无效？ #

你说在开发者控制台里有效，但页面内脚本无效，大概率是因为你的自定义脚本在kendo.all.min.js之前加载了，或者在网格已经初始化完成之后才执行。只要把上面的脚本放在kendo脚本引用之后，就能确保覆盖默认行为啦！

新手提示 #

绝对不要直接修改kendo.all.min.js，一来升级组件时你的修改会丢失，二来维护起来非常麻烦。上面的两种方法都是基于组件扩展的方式，完全符合最佳实践。

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