how do you export filtered data in kendo grid to excel for jquery ui

2 Answers 48 Views
Button Data Source General Discussions Grid
joshua
Top achievements
Rank 1
Iron
joshua asked on 06 Jan 2022, 04:39 PM

Hi,

 

I'm using client-side filtering after the kendo grid is rendered and I wanted to export to excel the filtered data in some situations.

I tried using $("#reportResultsGrid").data("kendoGrid").dataSource.view() and that gives me the current object of what I want to export to excel, but I can't figure out how to use the saveAsExcel() method to export what's in that current view() in the kendo grid. I can console log it, but I just can't figure out how to export the filtered data. 

 

My goal originally was to create a custom button in excel toolbar and use that to export the data but, now I'm just using a stand alone button at the top of the page for testing purposes. Ideally I would like to create a button in the excel toolbar that just exports whatever is in the current kendo grid view.

Below is as far as I've figured out.

 $('#testSaver').on("click", function () {
    $("#reportResultsGrid").data("kendoGrid").dataSource.view()
    console.log(clientSideFilterData);

});

2 Answers, 1 is accepted

Sort by
0
joshua
Top achievements
Rank 1
Iron
answered on 07 Jan 2022, 05:27 PM
Still searching for a solution on this. Any help or articles are greatly appreciated. 
0
Nikolay
Telerik team
answered on 11 Jan 2022, 09:15 AM

Hello Joshua,

Once you obtain the filtered data -  dataSource.view() - you need to utilize the kendo.ooxml.Workbook to create excel workbook and export it via kendo.saveAs() method. 

I have created a Dojo demo demonstrating this approach:

Let me know if you have any questions.

Regards,
Nikolay
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/.

joshua
Top achievements
Rank 1
Iron
commented on 19 Apr 2022, 02:00 PM

so, in the example you use static data. I am using a remote data source so I can't write out what cells or columns Can you show an expanded example for use with dynamic data?
joshua
Top achievements
Rank 1
Iron
commented on 19 Apr 2022, 02:20 PM

my data is dynamic even, meaning users choose the columns of data that gets rendered in the grid, so figuring out how to read through those columns and being able to generate a new export with the filtered data is ideal.
Nikolay
Telerik team
commented on 22 Apr 2022, 10:37 AM

Hi Joshua,

For a dynamic Grid, you need to generate the rows to be exported based on the generated columns for the Grid. FOr example:

      function generateRows() {
        var rows = [ {cells: [] }];
        for (let i = 0; i < columnNames.length; i++) {
          rows[0].cells.push({ value: columnNames[i] })
        }
        return rows;
      }

      function exportFilteredData() {
        var rows = generateRows();
        var data = $("#grid").data("kendoGrid").dataSource.view();

        for (var i = 0; i < data.length; i++){
          rows.push({
            cells: []
          })
          for (var c = 0; c < columnNames.length; c++){
            var colName = columnNames[c];
            rows[i+1].cells.push({ value: data[i][colName] });
          }
        }
        
        var workbook = new kendo.ooxml.Workbook({
         ....
        });
        // Save the file as an Excel file with the xlsx extension.
        kendo.saveAs({dataURI: workbook.toDataURL(), fileName: "Test.xlsx"});
      }

Here is the Dojo demo I prepared demonstrating the above: https://dojo.telerik.com/uRAlEZuC

Let me know if you have any questions,

Regards,

Nikolay

 

Tags
Button Data Source General Discussions Grid
Asked by
joshua
Top achievements
Rank 1
Iron
Answers by
joshua
Top achievements
Rank 1
Iron
Nikolay
Telerik team
Share this question
or