How to Export All Grid Data (include all pages) from outside grid button click?

1 Answer 139 Views
Grid
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Daochuen asked on 06 Aug 2021, 06:33 AM

Hello,

Could someone provide sample code for export Grid data to excel?  below is the requirement:

1. This is MVC project

2. Kendo Grid with many pages in the View.

3. button located in the view but not located in the toolbar section of the Grid.

4. When click button, all Grid data (not just View data)  should export to excel file.

 

Thanks.

 

1 Answer, 1 is accepted

Sort by
0
Accepted
Anton Mironov
Telerik team
answered on 10 Aug 2021, 12:05 PM

Hi Daochuen,

Thank you for the details provided.

In order to achieve the desired behavior, I would recommend trying the following approach:

  1. Use the "Click" Event of your custom button for exporting the Kendo UI Grid.
  2. In the Event handler, get the instance of the needed Grid.
  3. Get the currently set pageSize for the dataSource of the Grid.
  4. Get the total count of the dataItems in the dataSource using the help of the "total" method.
  5. Set the pageSize for the Grid to be equal to the value of all the dataItems(the value returned from the total method).
  6. Manually export the Grid with the help of the "saveAsExcel" method.
  7. The setTimeOut method will provide the opportunity to set back the original pageSize(we already have it in step 3) of the Grid after the export finish.
  8. Here is an example of the Click Event handler:
        function onClick() {
            var grid = $("#grid").data("kendoGrid");
            var pageSize = grid.dataSource._data.length;
            var dataSourceTotal = grid.dataSource.total();
            grid.dataSource.pageSize(dataSourceTotal);
            grid.saveAsExcel();
    
            setTimeout(function () {
                grid.dataSource.pageSize(pageSize);
            }, 300);
        }

Attached is a sample project that I prepared for the case. It includes the approach above.

Make the needed tests locally with the project attached and let me know if this is the needed behavior.

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/.

Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
commented on 12 Aug 2021, 03:14 AM

Perfect explanation.  Thanks Anton!
Tags
Grid
Asked by
Daochuen
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Anton Mironov
Telerik team
Share this question
or