Warning user that it may load huge data that spends lots of time.
4 Answers 26 Views
Kent
Top achievements
Rank 1
Iron
Kent asked on 05 May 2021, 01:58 AM

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.

4 Answers, 1 is accepted

Sort by
0
Accepted
Anton Mironov
Telerik team
answered on 18 May 2021, 12:41 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Anton Mironov
Telerik team
answered on 07 May 2021, 02:15 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Kent
Top achievements
Rank 1
Iron
answered on 10 May 2021, 03:32 AM | edited on 10 May 2021, 07:54 AM

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.

0
Anton Mironov
Telerik team
answered on 12 May 2021, 03:56 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

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.
- by
Kent
Top achievements
Rank 1
Iron
on 14 May 2021, 02:32 AM
Tags
Grid
Asked by
Kent
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
Kent
Top achievements
Rank 1
Iron
Share this question
or