This is a migrated thread and some comments may be shown as answers.

Problem with Excel export after restoring grid state

12 Answers 1067 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Kaan asked on 23 Nov 2016, 04:11 PM

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

12 Answers, 1 is accepted

answered on 12 Dec 2016, 06:23 PM

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>

answered on 12 Dec 2016, 06:48 PM

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.

answered on 13 Dec 2016, 02:19 PM

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

answered on 14 Dec 2016, 03:12 PM

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:

Move/hide/sort the columns
Export Excel: file has the same current column order/visibilty/sorting
Save this grid state
Restart example
Load last grid state
Export Excel: file has NOT the same current column order/visibility/sorting

Best regards,

Kaan