Kendo Grid exported excel not able to read

[abdul]

Hi,

I am exporting excel from kendo grid in client side with default Excel() method.

When I am trying to read any exported excel from JavaScript I am not able to read any excel data, but when I open the excel file and click on save button, then going forward that excel I am able to read from JavaScript. Below are the codes used for export and import. 

Export Code:

function exportData(gridName) {
    var grid = $("#" + gridName).data("kendoGrid");
    var pageSize = grid.dataSource._pageSize;
    var dataSourceTotal = grid.dataSource.total();
    grid.dataSource.pageSize(dataSourceTotal);
    grid.saveAsExcel();
    grid.dataSource.pageSize(pageSize); // Reset page size after a delay
}

Import Code :

const reader = new FileReader();
var mappedExcelRecords = [];

// The callback is executed here, once the load event fires
reader.onload = function (event) {
    var data = event.target.result;
    var workbook = XLSX.read(data, {
        type: 'binary'
    });

    var jsonExcelRecords;

    workbook.SheetNames.forEach(function (sheetName) {
        jsonExcelRecords = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])
    })

In jsonExcelRecords variable I am getting all the excel data if the excel is open and saved once but when the excel is exported from the kendo grid and trying to import then the below code doesn't get any data from excel.

jsonExcelRecords = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])

Please look into this issue and feel free to ask if you need any new information.

 

[Anton Mironov]

Hi Abdul,

Thank you for sharing your export and import code. Based on your description, it seems the exported Excel file from the Kendo Grid is not being read correctly by the XLSX library until it is opened and resaved in Excel. This often happens if the JSZip library is missing or not loaded before the Kendo UI scripts, which is required for proper Excel export functionality.

Please ensure that you include the JSZip library before the Kendo UI scripts:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
<script src="path/to/kendo.all.min.js"></script>

Additionally, the Kendo Grid exports data in the OOXML format, which is compatible with Excel 2007 and above. If your exported file includes only data values (and no unsupported HTML templates), it should be readable by the XLSX library.

To help further, could you please provide:

• A sample of the exported Excel file that cannot be read by JavaScript.
• Details about any custom column templates or export settings you use in the grid.

This information will help pinpoint the issue with the Excel file structure or content. For reference, here are useful resources about Excel export and supported features:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/excel-export#excel-export

Additionally, the following article provides more information about exporting and importing an Excel file in a Grid:

• https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/import-excel-grid

I hope this information helps.

Kind Regards,
Anton Mironov
Progress Telerik

[abdul]

Hi Anton,

Thanks for the quick response. I tried with putting the jszip.min.js before kendo.all.min.js still without saving the JavaScript is not able to read the excel data. Once the excel is open and saved once then that particular file I am able to read properly any sub-sequent number of times.

Due to security concerns I can't provide the excel but I am just attaching the below screenshot and masking the specific data and ID is a dummy data so i didn't mask it.
Consider the excel is like below. After we export the Kendo grid, it won't read but once we save that excel once we are able to read the excel data from the below code.

jsonExcelRecords = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName])

[Anton Mironov]

Hi Abdul,

Thank you for the image and the additional details provided.

I am not sure about the customizations implemented. Please note that the Telerik UI is a user interface that is responsible for visualizing the provided data. All the customizations and formatting of the data should be implemented before being received from the user interface.

The approach that was implemented by us is represented in the following article as a custom solution. Feel free to follow the instructions 
From the following article:

• https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/import-excel-grid

If you need additional assistance for your specific case, feel free to open a ticket in our system and attach an isolated version of your application along with a test Excel file that should be imported.

 

Best Regards,
Anton Mironov

 

[abdul]

Hi Anton,

The above issue got resolved just by updating the xlsx.full.min.js to the latest version.

Old :

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.full.min.js"></script>

New :

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

[Anton Mironov]

Hi Abdul,

Thank you for sharing the fix with the community.


Best Regards,
Anton Mironov