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

[joshua]

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);

});

[joshua]

Still searching for a solution on this. Any help or articles are greatly appreciated. 

[Nikolay]

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:

• https://dojo.telerik.com/AJIpalin

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[joshua]

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]

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]

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