Refresh grid contents from remote data source without gray overlay and spinning timer wheel

[Xander van der Merwe]

I'm still experimenting with using the ejGrid inside a LightSwitch 2013 HTML client and binding it to the LightSwitch generated/hosted OData remote data source.

I have one grid that needs to be regularly refreshed around every 5 seconds or so to reflect the latest data from the backend OData source. For the moment I use a javascript timer, but this may well later be replaced with SignalR. When this auto refresh takes place it grays out the entire grid and show the spinning waiting wheel until the refresh has been completed. This is not great from a user experience perspective given that these frequent refreshes happen automatically.

I use the following call to refresh the gird contents only:

$(grid).ejGrid("refreshGridContent", false);

Is there any way to do a refresh without the gray overlay and spinning timer wheel? I want the refresh to be perceived by the user similar to when Outlook refreshes your inbox. 

I do not mind the gray overlay and spinning wheel when you click previous or next page as that is a user initiate action.

Thanks in advance

[Madhu Sudhanan P]

Hi Xander,

 

Query: “Is there any way to do a refresh without the gray overlay and spinning timer wheel?”

 

We can hide the waiting popup during grid refresh alone and not during other operations such as paging, grouping etc. with the help of actionBegin event.

 

The actionBegin event will be triggered before every action begins. Please refer the following code snippet.

 

$("#Grid").ejGrid({

dataSource: dataManger,

actionBegin: "showHidePopup",

allowPaging: true,

. . . .

});

 

function showHidePopup(args) {

            if(args.requestType =="refresh")

                $('#' + this._id + '_WaitingPopup').css("visibility", "hidden");

            else {

                $('#' + this._id + '_WaitingPopup').css("visibility", "visible");

 

            }          

        }

 

function refresh() {             

            $("#Grid").ejGrid("refreshGridContent",true);           

        }

 

 

In the showHidePopup function, if the requestType is refresh we set  visibility as hidden for waitingpopup otherwise set as visible. Now the waitingpopup will not appear during grid refresh.

 

For your convenience we have created a simple sample please find the attached sample.

 

Please let us know if you require further assistance.

 

Regards,

Madhu Sudhanan. P

Attachment: waitingpopup_9480a2ef.zip

[Xander van der Merwe]

Thank you for the clear explanation and working example.

For some reason the $('#' + this._id + '_WaitingPopup') part does not work on a LightSwitch HTML screen as this._id resolves to null. Is there any other way to access the popup element or this._id using either the main grid object or the passed args parameter? I have also tried $("element[id$='_WaitingPopup']") to no avail.

Thanks in advance

[Maithiliy K]

Hi Xander,

 

Thanks for using Syncfusion Products.

 

Query: Is there any other way to access the popup element or this._id using either the main grid object or the passed args parameter?

 

The this._id is used to get the id of the current Grid element. We are not able to get the id of the grid from the args parameter. But we can get the id of the grid element from the grid object. Please refer the below code snippet.

 

Code snippet:

 

  var gridObj = $("#Grid").data("ejGrid"); //get the grid object;

  var gridId = gridObj._id; //get the id of the grid from the grid object;

  $('#' + gridObj._id + '_WaitingPopup').css("visibility", "hidden");

 

For your convenience we have modified the previously updated sample and the sample can be downloaded from the attachment.

 

Please let us know if you have any queries.

 

Regards,

Maithiliy K

 

Attachment: gridurlbinding_c8be27f8.zip

[Xander van der Merwe]

Thank you, I finally got this working. 

For those that are interested in using this with the LightSwitch HTML client, note that you have to explicitly set an id for the grid custom control inside the custom control _render() event as LightSwitch does not set or use ids at all. So you need to set an explicit id like this:

myapp.MyScreen.MyGrid_render = function (element, contentItem) {

    $(element).attr("id", "Grid");  // set an id for the grid that can be used inside the grid actionBegin() event to hide the waiting popup

    ... create the grid...

};

[Madhu Sudhanan P]

Hi Xander,

 

Thanks for your update.

 

Please get back if you require further assistance. We will be glad to assist you.

 

Regards,

Madhu Sudhanan. P