Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
225
Loading indicator for igGrid
posted

We are using  $("#grid").data("igGrid")._loadingIndicator.show(); to force the loading indicator to show while the data is being retrieved.

Is there a way to set a timeout on the loading indicator? If it is a large data set we want to handle this in the UI. If the loading indicator is displaying for more than 15 seconds we want to show the user a modal dialog that says " Your request is producing a large number of results please click cancel to stop your search and apply a filter to your search or click OK to wait for you results"

I know we should handle this is a different way but we are under a time constraint and have to handle in a way that will not trigger a massive QA retest effort. 

  • 29417
    Offline posted

    Hello John,

    Since you’re showing and hiding the indicator manually I assume that the remote request is not initiated by the grid since the grid shows the indicator automatically when bound to remote data while the data is being retrieved. Let me know if that’s the case.

    If so then there’s no need to hook to the grid events. Assuming you’re using a standard $.ajax call to retrieve your data you can hook to the related callback functions (beforeSend, complete) to show/hide the indicator and set a timeout (setTimeout) to check the request status (readyState of the request) to show the additional dialog if the request has not completed in the 15 seconds time frame. 

    Let me know if you need any additional assistance regarding this.

     

    Regards,

    Maya Kirova

  • 1175
    Offline posted

    I imagine you use a setTimeout for 15 seconds paired with a event listener on datarendered.

    pusedo code:

    If datarendered fires, you set a flag.
    if setTimeout fires, you check the flag.  If the flag is set, you ignore.  Otherwise, you display a dialog.

    rough non-test sample:

    var isRendered = false;

    $(document).one("#igGrid", "iggriddatarendered", function (e, ui) {
    isRendered = true;

    });

    setTimeout(function () {

    if (isRendered) {

    return;

    }

    // display dialog

    }, 15000);