Kendo UI ASP.NET MVC - 如何在每个网格而不是它们的内容上应用加载掩码？答案

【问题标题】：Kendo UI ASP.NET MVC - How to apply loading mask on every grid instead of their content?Kendo UI ASP.NET MVC - 如何在每个网格而不是它们的内容上应用加载掩码？
【发布时间】：2018-01-03 13:25:28
【问题描述】：

我开始为 ASP.NET MVC 使用 Kendo UI，我的版本是 2014.3.1119。

目前，当我在我的应用程序中刷新网格时，加载掩码覆盖（class="k-loading-mask" 属性的<div> 元素）应用于网格的<div class="k-grid-content"> 元素。

因此，当网格开始刷新时，遮罩仅覆盖可见单元格（在它们上方和下方，遮罩结束并且一切都处于活动状态，所以如果我有一个连续的链接，它是可点击的并且可以正常工作)。

此外，掩码不会到达列标题或包含处理分页的按钮的栏。

如果刷新时间更长，看到这种行为的机会就更大，并且它适用于我在应用程序中使用的每个网格。

在 the official Kendo UI Grid demo page 上，您可以测试此行为（如果您真的很快 :P ），这表明这是此小部件的默认行为方式。

在我的例子中，控制它的脚本是来自 Kendo UI 包的kendo.all.min.js 文件，该文件应用于整个应用程序。

我对这种方法的问题是我想在我的网格中使用大量链接指向 SQL 查询（小型和大型查询）。

如果用户可以在刷新过程中对我的网格的任何部分进行操作，这将导致应用程序

放慢速度或
并行执行这样的操作可能会导致一团糟...

我尝试将此加载掩码放在外部，主网格的<div> 元素与class="k-grid" 属性（徒手，在开发控制台中；它应该只是网格元素的第一个子元素)，它覆盖了网格的每个部分；在这种状态下，网格绝对无法单击或滚动，这对我来说是最好的行为。

您可以在 this JSFiddle example page 上看到使用内联脚本创建的这种方法的示例。

当然，我的第一个方法是做同样的事情，在我看来的 .cshtml 文件中...... 但它没有改变任何东西。

我认为（也许我错了）在我的应用程序的每个页面中导入的主脚本会覆盖我在页面文件中创建的函数。

但是我认为最好的解决方案是，如果我可以在主 kendo.all.min.js 文件中更改某些内容（以某种方式），以便在每次刷新我的网格时将叠加层放置在主网格元素内，而不是带有 k-grid-content 类的元素.

谁能给我建议如何在应用程序的任何地方创建这种网格覆盖？

甚至可以不更改我的主 JS 文件吗？如果是，我应该如何修改这个文件？

（不是为了保护自己免受任何伤害，但是我是 ASP.NET 和 JS 的初学者，伙计们......只是想知道...... :D）

【问题讨论】：

标签： javascript asp.net asp.net-mvc kendo-grid kendo-asp.net-mvc

【解决方案1】：

是的，您可以通过覆盖其“内部”_progress() 方法来覆盖网格在应用加载掩码时所做的事情。它是否是推荐的技术是有争议的，因为它涉及更改“非公共”方法，这意味着 Telerik 可以在没有警告的情况下更改它并导致您的覆盖破坏事情。

无论如何，以下是实现目标的方法。

在您自己的 JS 代码中的某处（也许您在每个页面上都包含一个 utility.js 文件），添加您自己的 Grid _progress() 方法的实现，该方法确定元素以掩盖您希望如何确定它，即：

kendo.ui.Grid.prototype._progress = function (toggle) {
    var element = this.element;
    // Here is where out-of-the-box Kendo figures out what element of the grid to mask.
    // But we don't care and want to mask the entire grid, which is this.element.
    kendo.ui.progress(element, toggle);
}

示例：http://dojo.telerik.com/@Stephen/uGUpas

【讨论】：