We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

115925 Feb 27,2014 12:05 AM Mar 6,2014 03:58 AM JavaScript 5
loading
Tags: ejGrid
Xander van der Merwe
Asked On February 27, 2014 12:05 AM

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 [Syncfusion]
Replied On February 28, 2014 07:05 AM

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
Replied On March 2, 2014 07:11 PM

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 [Syncfusion]
Replied On March 3, 2014 01:55 AM

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
Replied On March 3, 2014 10:53 PM

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 [Syncfusion]
Replied On March 6, 2014 03:58 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;