Exporting a grid to Excel in a tabstrip of multiple grids exports the wrong grid

[PaulH]

I have gone back and forth trying to track down an Excel export problem I have but to no avail. I have a page which loads a tabstrip and creates tabs dynamically based on data stored in an odata list - retrieved using a kendo datasource and I then loop through the data to create the tabs and populate the tabs with a grid each of which is connected to an odata source. Each grid has an export to excel toolbar button with specific export code to reformat parts of the export to replace footertemplate <span> tags to output totals in bold and things like that but whichever grid I press the export button on, it always exports the grid from the last tab. I've even added specific buttons on to each tab above the grid and made the code on the button click event call an onClick function to do the following:

function onClick(e) {
    var grid = '#' + e.event.target.id.replace('btnExcelExport', '').toLowerCase() + 'grid';
    $(grid).data("kendoGrid").saveAsExcel();

    return false;
}

 

I added an alert into the function above to display the "grid" variable and the name is correct but in each case it still exports the data from the grid on the last tab. I have checked the page carefully and each grid has a unique id so it's not an issue with that. Just in case it matters the export code in the grid is as follows:

excelExport: function (e) {
                        var sheet = e.workbook.sheets[0];
                        var cellValue = '';

                        for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
                            var row = sheet.rows[rowIndex];

                            for (var i = 0; i < row.cells.length; i++) {
                                cellValue = row.cells[i].value;
                                if (cellValue === undefined) { }
                                else {
                                    if (typeof cellValue === 'string') {
                                        if (cellValue.indexOf("float:right") != -1) {
                                            row.cells[i].value = cellValue.replace("<span class='boldFont' style='float:right;'>", "").replace("</span>", "");
                                            row.cells[i].hAlign = "right";
                                            row.cells[i].bold = true;
                                        }
                                        else if (cellValue.indexOf("boldFont") != -1) {
                                            row.cells[i].value = cellValue.replace("<span class='boldFont'>", "").replace("</span>", "");
                                            row.cells[i].bold = true;
                                        }
                                    }
                                }
                            }
                        }
                    }

 

Any advice or suggestions?

[PaulH]

Found the problem. I hadn't realised that the export to Excel would go and force the grid to re-read the data and at the time that was occurring a filter variable had been overwritten with the value of the last grid. I've forced it to recalculate the filter at export time and now it works fine.

[Stefan]

Hello Paul,

I'm glad to hear that the issue is resolved and thank you for sharing the solution with the Kendo UI community.

Also, the Grid will read the data in case some of the server operations are set, as then all of the data for the export is not available on the client, and the Grid is making a request to retrieve it.

Regards,
Stefan
Progress Telerik