How to center the “Loading data . .” message in the visible screen in jqgrid treegrid?

Question

I have a jqGrid treegrid with about 40 columns so there is a large horizontal scroll bar (depending on the size of the browser). The issue is since the width is so large, when the page loads or i do a filter, etc, you don't see the popup "Loading message . ." because its off to the right of the screen.

Is there any way to have the "Loading Data. ." message center in the current visible screen (instead of the page as a whole?

Answer 1

I find your question is good. The same issue could have other users of jqGrid.

I personally prefer to use loadui: 'block' setting which shows the overlay over the whole grid during the grid loading. In the case the problem will be not so important.

You can get better results if you change the position of the "Loading ..." div inside of the loadBeforeSend:

loadBeforeSend: function () {
    var $loadingDiv = $("#load_"+$.jgrid.jqID(this.id)),
        $bdiv = $(this).closest('.ui-jqgrid-bdiv');
    $loadingDiv.show().css({
        top: (Math.min($bdiv.height(), $(window).height()) - $loadingDiv.height())/2 + 'px',
        left: (Math.min($bdiv.width(), $(window).width()) - $loadingDiv.width())/2 + 'px'
    });
}

In my opining it would be good to modify the base code of jqGrid (to be exactly to modify the code of beginReq function) to have the described above changing of the position of the "Loading ..." div always.

UPDATED: Probably the better implementation of the changing the position of the "Loading ..." div will be

var gridIdAsSelector = $.jgrid.jqID(this.id),
    $loadingDiv = $("#load_" + gridIdAsSelector),
    $gbox = $("#gbox_" + gridIdAsSelector);
$loadingDiv.show().css({
    top: (Math.min($gbox.height(), $(window).height()) - $loadingDiv.outerHeight())/2 + 'px',
    left: (Math.min($gbox.width(), $(window).width()) - $loadingDiv.outerWidth())/2 + 'px'
});

The code should be placed in the loadBeforeSend as before.

UPDATED 2: The demo demonstrate the idea. I included the code outside of loadComplate only for demonstration purpose to show how it will work. In the demo the "Loading" div stay visible and I show additionally the overlay displayed in case of usage of loadui: 'block' option:

Answer 2

Position the container of the loading message in a fixed position with the top and left assigned to around 40%-60%. That would fix it

It should be something like that :

.loading-message-container {
     position : fixed;
     top:50%;
     left: 45%;
}