Warning user that it may load huge data that spends lots of time.

[Kent]

I want to make a grid with excel exporting feature which will export all data.

However, the grid might contain a massive amount of data that makes the export process spends lots of time.

I've found this that shows confirmation before exporting.

https://docs.telerik.com/kendo-ui/knowledge-base/export-the-grid-to-excel-only-after-confirmation

 

However, the confirmation popup window shows after loading all data (it popup after a few time after I click the export button, so I guess it loads all the data, or the excelExport event is activated after the excel file is well prepared to be exported).

Is it possible to show the confirmation window as soon as I click the export button?

 

Thanks.

[Anton Mironov]

Hello Kent,

In order to achieve the desired behavior, I would recommend handling the "click" event of the Excel export button as follows:

    $(".k-grid-excel").click(function (e) {
        var result = confirm("You about to export the Grid in Excell, are you sure?");
        if (result == true) {
            console.log("Export is happening now");
        }
        else {
            console.log("Export forbidden");
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    })

Attached is a sample project that includes the approach above. Make the needed tests locally and let me know if further assistance is needed.

 

Best Regards,
Anton Mironov
Progress Telerik

[Anton Mironov]

Hi Kent,

Thank you for the details provided.

I tried the pointed implementation and assumed that the reason is not in the approach. As you can see, the export is not taking any action until the confirmation button is clicked:

        function excelExport(e){
          

          if(!exportConfirmed)
          {
            e.preventDefault()
            var result = confirm("You about to export the Grid in Excell, are you sure?");
            if (result == true) {
              exportConfirmed= true;
              e.sender.saveAsExcel();
              exportConfirmed= false;
            } 
          }
        }

Could you please double-check the Network tab in the Developer Tools Console when "click" the excel button. Which processes are starting and which one is taking the most time.

The fastest route to getting you up and running is if you could provide a runnable, isolated, sample project. Examining this project will let us replicate the issue locally and further troubleshoot it.

Looking forward to hearing back from you.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Kent]

Hi Anton Mironov,

As soon as I click the export button, the Network tab in the Developer Tools Console shows that a POST request is sent to my REST service which is used as the data source of this grid, and after that the confirm menu shows.

So whether it's confirmed or not, this request will be sent.
It takes about 3 seconds (3001 ms) to get the data (total 1.5 MB, local MySQL database on docker).
The process: "export" clicked -> POST request sent -> confirm popup -> confirm -> save

Sorry for unable to provide the project because the data and the project are both not available to the public.

P.S. This project use amplifyJS to send the POST request to get data from the REST service, and the amount of demo data is about 2000.

[Anton Mironov]

Hi Kent,

Thank you for the additional details provided.

I tried to reproduce the pointed behavior, still, no success to create the exact same conditions.

In this case, I agree with you that the excelExport event handler is too late to restrict the POST request. My next suggestion is to try preventing the request in the "click" event handler of the export button.

Give a try at the approach above and let me know the result.

Best Regards,
Anton Mironov
Progress Telerik

[Kent]

The first thing that comes in mind is to get the click event of the "export" button. If excelExport is not equivalent to the click event of the button, can you provide a sample of it? Thanks.