Problem with Excel export after restoring grid state

[Kaan]

Hello!

I am using a Kendo ToolBar widget as the toolbar for a Kendo Grid with a custom button to export the grid data as a MS Excel file. The custom button uses the CSS class "k-grid-excel" in order to implement the Excel functionality automatically.

The documentation (http://docs.telerik.com/kendo-ui/controls/data-management/grid/excel-export) says that "The Grid uses the current column order, visibility, and dimensions to generate the Excel file.", which works as expected as long as I do not use grid persist state functionality.

However, when I preserve the grid state, then restore it, then click on the export button, the generated Excel file does not use the current column order and visibility. I wanted to reproduce the problem in your online example (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/state/preserve-grid-state-in-a-cookie), but unfortunately the preview and the Dojo do not work as expected, although your other online examples work.

I have found out that export after restoring the grid state works as expected (column order and visibility) if I use the saveAsExcel() method instead of having a button with the "k-grid-excel" CSS class. Do you have any idea, why these two are behaving differently?

I also want to remark that I detach the toolbar DOM, restore the grid state, and then insert the toolbar DOM back to the grid. I am also using the MVC Wrappers, but I think the problem applies to Kendo UI Grid in general.

 

Best regards,

Kaan

 

 

 

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/state/preserve-grid-state-in-a-cookie

[Dimiter Madjarov]

Hello Kaan,

There should not be any difference in clicking the export button and manually invoking the saveAsExcel method, as this is what the button is doing under the hood. Please excuse us for the problems with the Dojo, it should be working as expected now. Could you reproduce the issue in it, so we could observe it locally and provide assistance?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik by Progress

[Kaan]

Hello Dimiter,

Unfortunately I can still not run the preview (and Dojo) of your "Preserve Grid State in a Cookie" example.

The preview stays blank. I have tested it on two different computers (Windows 7, Windows 10) with two different browsers (Chrome and IE Edge). The other examples in the same category like "Persist Collapsed State of Grouped Records" and "Persist Expanded Rows after Refresh" work fine.

Could you please check the examples again?

Best regards,
Kaan

[Stephen]

While this does not help you with your problem directly, the "http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/state/preserve-grid-state-in-a-cookie" demo is not working because the closing tag of the script block is missing the "/"

 

To get it working, change the last "<script>" to "</script>" and then it should run.

[Kaan]

Hi!

Yes, there is a slash missing in the closing script tag. Thank you for pointing this out, Stephen!

When I add the slash, at least I can see an empty Kendo grid, but the grid data is not loaded because there is still an error in the official Kendo example. I think JavaScript can't find the $.cookie functions.

Dear Telerik support team: Could you please fix the example? I think this will be helpful for other developers as well. When it's fixed, I could try to reproduce the Excel export problem I have encountered.

 

Best regards,
Kaan

[Dimiter Madjarov]

Hello guys,

Indeed there is an issue with the example, caused by a missing jQuery plugin. I will log this for fixing.

In  the mean time, I would suggest to use the persist-state example on our demos page instead.

Regards,
Dimiter Madjarov
Telerik by Progress

[Kaan]

Hi Dimiter,

I have adapted your Dojo example to use localStorage (the way it's done in the persist-state example from your demos page) instead of $.cookie. I have also enabled Excel export functionality. Just click on the link below, or copy and paste the code into the Dojo.

When I run the example, change column order/sorting/visibility, it also effects the exported Excel file. When you save that current state, re-run the example, load the previous state, and then export as Excel file, the generated Excel file does not use the current column order/sorting/visibility. Are you able to reproduce the problem with the adapted Dojo example?

I think this has to do with the way, how I preserve the toolbar (because it's not defined as a template to make ASP.net MVC development easier), and it seems like the Excel button is doing more than just calling "saveAsExcel()" under the hood. Any idea what's happening there?

 

Best regards,

Kaan

 

http://dojo.telerik.com/IyEYA/6

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
  
  <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/jszip.min.js"></script>
  
</head>
<body>
  
        <div id="example">
            <div class="box wide">
                <a href="#" class="k-button" id="save">Save State</a>
                <a href="#" class="k-button" id="load">Load State</a>
            </div>
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                                  toolbar: ["excel"],
            excel: {
                fileName: "Kendo UI Grid Export.xlsx",
                proxyURL: "//demos.telerik.com/kendo-ui/service/export",
                filterable: true
            },
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 20
                        },
                        height: 550,
                        groupable: true,
                        sortable: true,
                        reorderable: true,
                        resizable: true,
                        columnMenu: true,
                        filterable: {
                            mode: "row"
                        },
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 250,
                            locked: true
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title",
                            width: 350
                        }, {
                            field: "CompanyName",
                            title: "Company Name",
                            width: 350
                        }, {
                            field: "Country",
                            width: 450
                        }]
                    });

                    var grid = $("#grid").data("kendoGrid");

                    $("#save").click(function (e) {
                        e.preventDefault();
                        //localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
                      
                      
                      let dataSource = grid.dataSource;
                      let state = {
                          columns: grid.columns,
                          //page: dataSource.page(),
                          pageSize: dataSource.pageSize(),
                          sort: dataSource.sort(),
                          filter: dataSource.filter(),
                          group: dataSource.group()
                        }
                        
                        localStorage["state"] = kendo.stringify(state);
                    });

                    $("#load").click(function (e) {
                        e.preventDefault();
                        //var options = localStorage["kendo-grid-options"];
                        //if (options) {
                        //    grid.setOptions(JSON.parse(options));
                        //}
                     
                      let toolBar = $("#grid .k-grid-toolbar").detach();
                      
                      let state = JSON.parse(localStorage["state"]);
                      let options = grid.options;
                      options.columns = state.columns;
                      options.dataSource.pageSize = state.pageSize;
                      options.dataSource.sort = state.sort;
                      options.dataSource.filter = state.filter;
                      options.dataSource.group = state.group;
                      
                      let $grid = $("#grid");
                      $grid.empty().kendoGrid(options);
                     
                      $("#grid .k-grid-toolbar").replaceWith(toolBar);
                    });
                });
            </script>
        </div>
  
</body>
</html>

[Stephen]

You are replacing the options incorrectly...

$grid.empty().kendoGrid(options) is not doing what you think it is.

What you are doing is initializing a grid on an element($grid) that already has a grid that has been initialized on it.

So, you have initialized TWO grids on the same element, the initial one on page load, following by the second on during LoadState, but you have not completely destroyed(removed event, config, etc) from the first init and are just smashing the second init on top of the first...and getting weird behaviour.

In order to achieve what you want, I think you need to NOT reinit the grid and use setOptions:

let $grid = $("#grid");
//$grid.empty().kendoGrid(options); // Note: $grid element still has all the original events, etc attached.
var kGrid = $grid.getKendoGrid();
kGrid.setOptions(options);

 

Or you may be able to call grid.destroy() in addition to clearing out the DOM element in preparation to init the grid again.

[Dimiter Madjarov]

Hello Kaan,

Stephen is correct in his response. Initializing a new Grid instance is not needed. You should restore the options using the setOptions method instead.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions

Regards,
Dimiter Madjarov
Telerik by Progress

[Kaan]

Hi Stephen,

Thank you for your help!

Back then I decided not to use the getOptions/setOptions (http://demos.telerik.com/aspnet-mvc/grid/persist-state) approach, but rather the solution suggested at http://www.telerik.com/support/code-library/save-grid-state-in-session-on-server-side because then it is possible to define which grid options should be persisted, and which not.

I forgot to call grid.destroy(); to destroy the current grid instance before initializing a new grid. However, the problem still exists.

Right now I am solving the problem with a workaround by having a custom button, which calls the saveAsExcel() function. However, it would be interesting to know, why the default Excel export button does not work. I am not sure if this is a bug or expected behaviour, but I would really prefer to use out-of-the-box features as much as possible to avoid any unforseeable incompatiblities with future Kendo versions.

 

Best regards,

Kaan

[Dimiter Madjarov]

Hello Kaan,

If further assistance is required, you could send us an archived isolated runnable example that demonstrates it. As stated previously there is no difference in clicking the Export button and triggering it through the API.

Regards,
Dimiter Madjarov
Telerik by Progress

[Kaan]

Hello Dimiter,

I have prepared a small, isolated example here: http://dojo.telerik.com/IyEYA/8.

This example uses the solution suggested at http://www.telerik.com/support/code-library/save-grid-state-in-session-on-server-side, which allows to specify which grid options to persist (e.g. only pageSize, but not current page).

To reproduce the problem, run following steps:

1. Move/hide/sort the columns
2. Export Excel: file has the same current column order/visibilty/sorting
3. Save this grid state
4. Restart example
5. Load last grid state
6. Export Excel: file has NOT the same current column order/visibility/sorting

 

Best regards,

Kaan

[Dimiter Madjarov]

Hello Kaan,

Thank you for providing the runnable example. Indeed as you suggested the replacement of the toolbar with the old one is causing the problem. Removing this logic fixes the problem. Here is the updated example.

Regards,
Dimiter Madjarov
Telerik by Progress