Kendo Grid Excel Export crashing widget

1 Answer 156 Views
Grid
Ross
Top achievements
Rank 1
Ross asked on 22 May 2024, 08:01 PM

I'm encountering a difficult to troubleshoot issue with a Kendo Grid apparently crashing when I attempt to export its contents to an excel file.  I've successfully set up Kendo Grids to export to excel before, and my code here is very closely based on other solutions I've had in similar projects.  Below is the widget code:

@(
    Html.Kendo().Grid(Model.Groups)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.SamAccountName).Title("SamAccount").Width(250).HeaderHtmlAttributes(new { style = "font-weight: bold" });
        columns.Bound(c => c.DistinguishedName).Title("Full Name").Width(400).HeaderHtmlAttributes(new { style = "font-weight: bold" });
        columns.Bound(c => c.IsSecurityGroup)
            .Width(75)
            .Title("Security Group?")
            .ClientTemplate("#= IsSecurityGroup ? 'Yes' : 'No' #")
            .HeaderHtmlAttributes(new { style = "font-weight: bold" });
    })
    .Sortable()
    .Selectable(selectable => selectable
        .Mode(GridSelectionMode.Multiple)
        .Type(GridSelectionType.Cell))
    .Navigatable()
    .AllowCopy(true)
    .ToolBar(tools =>
    {
        tools.Custom().Text("Copy to Clipboard").HtmlAttributes(new { id = "copyButton" });
        tools.Excel();
        tools.Search();
    }).Excel(excel =>
    {
        excel.FileName(Model.SearchString + "GroupsExport_" + DateTime.Now.Date.ToShortDateString() + ".xlsx");
        excel.AllPages(true);
        excel.ForceProxy(true);
        excel.ProxyURL(Url.Action("ExcelExportSave", "Home"));
    })
)

And below is the corresponding action in my HomeController:

        [HttpPost]
        public ActionResult ExcelExportSave(string contentType, string base64, string fileName)
        {
            var fileContents = Convert.FromBase64String(base64);
            return File(fileContents, contentType, fileName);
        }


Behavior

The Grid will correctly load, and allow the user to search, sort, scroll, etc. However upon clicking the Export to Excel button the widget will enter a loading animation and then spin forever.  The rightmost IsSecurityGroup column will also appear to be duplicated, but I think this is a visual glitch as I'm not actually seeing an additional column be created in the page elements, this visual glitch goes away if I add "Scrollable".

My breakpoint in the ExcelExportSave() controller action is not being hit, and if I check the network tab it does not appear that a network request is even being made. 

There are no errors or warnings printed to the browser console.  

Troubleshooting steps I've tried:

  • Changing the controller for the ExcelExportSave action and also making the action [Anonymous]
  • Simplifying the Grid by removing the client-templates, dynamic filename, and custom button.
  • Removed other JS functions from the page (there aren't many, this is a pretty simple page and shouldn't have much conflicting logic)
  • Verified that the ViewModel values are not null and as expected on pageload
  • I have generally tried adjusting some of the Excel configuration options, but none of these seem to alter the behavior.

Kendo otherwise appears to be correctly imported into the project and I am not experiencing other issues.

My Environment and Project

This is an ASP.NET Core 8 MVC project being run in Visual Studio 2022 on a Windows laptop.  The project does use Microsoft Identity authentication and I am developing by running it on Localhost.  

 

Any help that anyone can provide would be greatly appreciated.  

1 Answer, 1 is accepted

Sort by
1
Accepted
Ivan Danchev
Telerik team
answered on 27 May 2024, 03:46 PM

Hello Ross,

Based on the described behavior and on the test I did locally using the Grid configuration you posted, most likely the jszip library is not referenced properly in the application and this causes the Excel export issue. This library is required, in order for the Grid's Excel export functionality to work.

Please try adding the following reference to the _Layout.cshtml:

<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

If you had been using our CDN to reference the jszip library before, be advised that it is no longer distributed through our CDN, so use the link above instead.

Regards,
Ivan Danchev
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.
Ross
Top achievements
Rank 1
commented on 30 May 2024, 07:23 PM

Hi Ivan, this did fix my issue, so huge thanks for that.

With that said, I'm not using the CDN.  I actually installed by directly copying the kendo-ui folder from the downloadable msi into my wwwroot/lib folder.

Is the jszip library no longer contained in the 2024.2.514 release of Telerik UI for ASP.NET Core?

While it's easy to manually include these files now that I know I need to, how would I have been able to figure this out without your answer?  I received no error messages, and nothing in the documentation indicates I would need an additional library dependency in order to make excel exports work.  This seems like something that Telerik should address as I'm likely not the only user who will be impacted by it.

Ivan Danchev
Telerik team
commented on 03 Jun 2024, 02:23 PM

Ross,

You are correct that the discontinued shipping of the jszip library has not been mentioned in the documentation, even though it shows the proper reference that has to be added, in order to set up the Excel export functionality properly: https://docs.telerik.com/aspnet-core/installation/system-requirements/export-support#jszip-library 

I've committed a note that will state that change, in order to avoid any confusion. It will go live with the next documentation deploy.

Thank you for this documentation feedback.

Pascal
Top achievements
Rank 1
commented on 23 Aug 2024, 01:24 PM

I'm disappointed that there is not an error message in javascript when this js file is missing. I removed the reference to jszip for I could not find any usage of it, plus it referred to a public url, which my users may not be able to access. A few weeks later I discovered that the export functionality was not working anymore. I did not think about removing the reference anymore.
It took me hours to discover what went wrong, mainly due to the lack of any feedback when the file is missing. I now downloaded the file myself and put it in my Scripts folder.
The main question is: Why do you not include this file anymore? This is very inconvenient, for I now have to maintain the version of this file myself.
Ivan Danchev
Telerik team
commented on 28 Aug 2024, 11:48 AM | edited

Hello Pascal,

Both the jQuery and the jszip third-party libraries are no longer shipped with our bundles and are not available on our CDN. There are a few reasons for that.

In the past, we were including a specific version of both libraries, e.g., jQuery version 1.12.4. At the same time our components support a number of jQuery versions (see this article). So, including a single version in the bundle is not very convenient, because different developers are using different versions of that library, for example: 2.2.0, 3.5.1, 3.6.0, 3.7.0, etc. Thus, in the past when version 1.12.4 of jQuery was available in the bundle, anyone who wanted to use a different version had to anyway use jQuery's official CDN or local file reference.

The reasoning above is also valid for jszip.

We also don't want to unnecessary increase the size of the bundle by including all the supported versions of these third party libraries.

We have another similar dependency to the pdf.js third party library (used by the PDF export functionality), and similarly to jQuery and jszip we are not including this library in the bundles and it is not available on our CDN.

On a side note, maintaining versions of these third-party libraries on our CDN is not optimal. jQuery and jszip have their own CDNs, so having one or multiple versions of them on our CDN would not provide any benefit. Since they are not part of our source code, but a dependency,  we've decided to not ship them with our source code or through our CDN. The developers that use our components are free to either:

1. Reference a supported version by using any official CDN for these third party libraries

or

2. Download the desired supported version from the respective official sources and reference the local file.

 

Tags
Grid
Asked by
Ross
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or