Kendo Grid Excel Export crashing widget

1 Answer 18 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.

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