How to hide the loader(Hide Loading) after file was exported when data is huge

[fuljoyment]

Hello Admin,

When I clicked on 'Export' button there is a significant delay before the file was downloaded.  I want to show the loading message to the user so that user will understands that some action is going on.  So, I added $( ".selector" ).pqGrid( "showLoading" ) on Export button click.  I used 'setTimeout' to stop the Loader and used $( ".selector" ).pqGrid( "hideLoading" ) but it was not working as expected.

Code: [Select]

listeners: [{
                    "click": function (evt) {
                        var grid = this;
                        grid1.pqGrid("showLoading");
                        setTimeout(function () {
                            grid.exportData({
                                url: "CustOrdTable/exportData",
                                format: $("#export_format").val(),
                                render: true
                            })
                        });
                        grid1.pqGrid("hideLoading");
                    }
                }]
Note: I think here setTimeout works when we want to export the local data.  This is not working with round trip to remote server.

So, My question is

• How we can show the loading message while data is getting ready for download with round trip to remote server?

Could you please suggest me what am doing wrong and if possible show me a demo on Exporting the Remote data with 'showLoading' and 'hideLoading'.

PS:-I am using ParamQuery Pro v6.2.4 in my ASP.net MVC project.

Thanks in advance,

[paramvir]

Please try this listener:

Code: [Select]

listener: function () {
var grid = this;
grid.showLoading();
var cnt1 = $(document).find("iframe[src*=pq_filename]").length;
var intv = setInterval(function(){
var cnt2 = $(document).find("iframe[src*=pq_filename]").length;
if(cnt2 > cnt1){
grid.hideLoading();
clearInterval(intv);
}
},300)
                        grid.exportData({
                            url: "/pro/demos/exportData",
                            format: $("#export_format").val(),
                            zip: $("#export_zip").prop("checked"),
                            nopqdata: true, //applicable for JSON export.
                            render: true
                        });
}


[fuljoyment]

Hi Again,

Even after using the above suggested listener code it was not working as expected.  After sometime(maximum 5 seconds) the loader is hiding before the file downloaded. I have tried to increase the interval time in the listener but no use. 

As I told you before I want to show the "Loader" image while data is getting ready to download and once file was downloaded I want to hide the "Loader".

PS:Currently I have 693238 records in my table.  I want to export all of them to different formats(csv/excel/json/html).  It would be very grateful for us if you suggest me better solution for this because it was an urgent fix for us.

Thanks in advance,

[paramvir]

The above shared listener works only for detection of complete uploading the data but it can't detect completion of downloading of file.

Sorry there is no inbuilt grid event for download complete currently, still looking for any workaround, would let you know if found one.

Have you tried local export without round trip to the server.

https://paramquery.com/pro/demos/export_local

[paramvir]

Please try this listener

Code: [Select]

listener: function () {
var grid = this;
grid.showLoading();
var cnt1 = $(document).find("iframe[src*=pq_filename]").length;
var intv = setInterval(function(){
var frames = $(document).find("iframe[src*=pq_filename]");
var cnt2 = frames.length, iframe;
if(cnt2 > cnt1){
clearInterval(intv);
iframe = frames[frames.length - 1];
intv = setInterval(function(){
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Check if loading is complete
if (iframeDoc.readyState == 'complete'){ //|| iframeDoc.readyState == 'interactive')
                                                                        {
grid.hideLoading();
clearInterval(intv);
}
}, 300)
}
},300)
this.exportData({
url: "/pro/demos/exportData",
format: $("#export_format").val(),
zip: $("#export_zip").prop("checked"),
nopqdata: true, //applicable for JSON export.
render: true
});
}


[fuljoyment]

Hi there,
 

Again, even after using the above suggested listener code it was not working as expected.  Please let us know if you found the best fit solution (Or) if you implement any grid event for download complete . Mean while I will also try to find the best possible solution for this.

Thanks and waiting for the positive reply,

[paramvir]

Have you tried local export without round trip to the server.

https://paramquery.com/pro/demos/export_local

[fuljoyment]

Sorry we don't need Local Export. But I tried with one of your demo's.