excelExport event on grid no longer supports showing hidden columns

[Scott]

We recently uprevved to the 2024.2.514 version of kendo ui and there appears to be a defect with manually handling the export excel event from a grid. We need to be able to show a hidden column so it appears in the export, then hide it again.

Previously we were able to call e.preventDefault, show the column, and call e.sender.saveAsExcel() before hiding the column and it worked. Now when we do this the "exporting ..." overlay remains. If I use jquery to remove the overlay the export button does not work when clicked a second time.

Our example is in razor and actually functions better than this jquery example below which doesn't even save the file.

https://dojo.telerik.com/oMEpuDAY

In other words the following code from https://docs.telerik.com/kendo-ui/knowledge-base/grid-include-hidden-columns-in-excel-export doesn't work anymore.

var exportFlag = false;
$("#grid").data("kendoGrid").bind("excelExport", function (e) {
    if (!exportFlag) {
        e.sender.showColumn(1);
        e.preventDefault();
        exportFlag = true;
        setTimeout(function () {
            e.sender.saveAsExcel();
        });
    } else {
        e.sender.hideColumn(1);
        exportFlag = false;
    }
});

[Alexander]

Hi Scott,

I can confirm that the described behavior is indeed a bug introduced on our side with Telerik UI for ASP.NET Core versions prior to "R1 2023". We have the following feedback item that further illustrates this on a more public scale:

GitHub Issue - https://github.com/telerik/kendo-ui-core/issues/6635

I have further reopened the item, as it appears that the issue is still persistent for the Telerik UI for ASP.NET MVC Grid. However, I am curious about the following statement:

"Our example is in razor and actually functions better than this jquery example."

Are you referring to the file exportation in particular? Regardless, I did ponder over potential alternatives. If more than one column is affected you can use a more dynamic approach. Which would revolve around filtering out the hidden columns, looping through each of the column instances, and setting the export option. For example:

<script type="text/javascript">
    function onDataBound(e){
        var columns = e.sender.columns.filter(column => {
            return column.hidden == true;
        }).forEach(column => column.exportable = {excel:true});
    }
</script>

Here, we are leveraging the DataBound event.

Additionally, I have personally embarked on providing a bux fix candidate for the aforementioned issue. It is currently pending review by our fellow developer subject matter experts.

For further bringing this to our attention, I have also updated your Telerik points. As a way of saying thank you and to keep up with the awesomeness. 

I am also attaching a runnable sample that showcases the abovementioned workaround. The manipulations are done explicitly for the "OrderDate" column.

Please give this suggestion a try and let me know how it works out for you. 

Kind Regards,
Alexander
Progress Telerik

[Scott]

When I say the razor code functions better I mean that we at least get the file downloaded in razor, it just leaves the "exporting" overlay. If I manually remove the exporting overlay that works however; none of the export buttons work after that until we refresh the page.

In the jquery dojo example the file isn't even downloaded.

Seems like we should be able to mark a column as not visible to the UI but visible to export without the need for further code.

[Alexander]

Thank you for the additional clarification.

Hmm, the unorthodox behavior seems to be a consequence of the prevention of the default behavior. To provide more context. As of our recent release, we did add an additional loading indicator. In order to enhance the overall UX experience upon exportation:

 

However, the prevention seems to be tampering with this functionality. Regardless, were you able to try the previously mentioned suggestion? 

In terms of the following statement on your end:

"Seems like we should be able to mark a column as not visible to the UI but visible to export without the need for further code."

I completely agree with you on this one. To provide you with more context, the previously linked GitHub issue is related to including or obscuring a given column. Based on the Columns.Bound.Exportable.Excel() API configuration:

@(Html.Kendo().Grid(Model)
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Name).Exportable(e => e.Excel(true));
    })
)

The bottom line here is that once the fix candidate is merged. You can safely omit the employed JavaScript logic. For toggling the hidden state prior to exportation.

I hope this clears things out.