Kendo UI ASP.NET MVC - How to apply loading mask on every grid instead of their content?

Question

I started to work with Kendo UI for ASP.NET MVC , my version is 2014.3.1119 .

Currently when I'm refreshing a grid in my application, the loading mask overlay ( <div> element with class="k-loading-mask" attribute) is applied on the grid's <div class="k-grid-content"> element.

So when grid starts refreshing, the mask overlays only the visible cells (above and below them the mask ends and everything is active, so if I have a link in a row, it's clickable and functioning).

Also, the mask does not reach the column headers or the bar containing the buttons which handle paging.

The chance to see this behavior is bigger if the refresh time is longer, and it applies for every grid I use in the application.

On the official Kendo UI Grid demo page you can test this behavior (if you're really fast :P ), which shows that it's the default way this widget acts.

The script which controls it in my case is the kendo.all.min.js file from the Kendo UI package, which is applied in the whole application.

My problem with this approach is that I want to use a lot of links in my grids pointing to SQL queries (both small and big queries).

If a user could be able to operate with any part of my grids during the refreshing progress, it would cause the application to

• slow down or
• do such operations paralelly which could result in great mess ...

I've tried to place this loading mask outside, to the <div> element of main grid with class="k-grid" attribute (with bare hands, in the dev console; it should be simply the first child element of the grid element), which overlayed every part of the grid; in this state, the grid was absolutely unable to click or scroll, which would be the best behavior for my purposes.

You can see an example for this kind of approach on this JSFiddle example page , created with inlined scripts.

Of course, my first approach was to do the same, in my view's .cshtml file... but it did not change anything.

I think (and maybe I'm wrong) that the main script which is imported in every page of my application overrides the function I've created inside my page file.

However I think that the best solution would be if I could change something (somehow) in the main kendo.all.min.js file to place the overlay inside the main grid element instead of the one with k-grid-content class everytime my grid is refreshed.

Can someone of you give me advice how to create this kind of grid overlay everywhere in the application?

Is it even possible without changing my main JS file? If it is, how should I modify this file?

(Not to protect myself from anything, but I'm beginner in ASP.NET and JS, folks... just to know... :D )

Answer 1

Yes, you can override what the grid does when it applies the loading mask by overriding its "internal" _progress() method. Whether or not it is a recommended technique is debatable as it involves changing a "non-public" method, which means that Telerik could change it without warning and cause your override to break things.

Regardless, here is how you can achieve your goal.

Somewhere in your own JS code(perhaps you have a utility.js file you include on every page), add your own implementation of the Grid's _progress() method that determines the element to mask how you want it to be determined, ie:

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);
}

Example: http://dojo.telerik.com/@Stephen/uGUpas