Save grouping state in grid

[Roel]

Hi,

In the gridconfig I use the following code:

			group: function (e) {

				if (e.groups.length) {
					localStorage["ndo-grid-options"] = kendo.stringify(e.sender.getOptions());
				} else {
					localStorage["ndo-grid-options"] = '';
				}
			},

In document.ready:

		var options = localStorage["ndo-grid-options"];
		var grid = $('#grid').data('kendoGrid');

		if (options) {
			grid.setOptions(JSON.parse(options));
		}

But it is not working 100% as expected. Probably I am doing something wrong. Please take a look at the Loom video below.

https://www.loom.com/share/89708bc87e5449ecb55f4eb8a4b9637e

Thanks, Roel

[Georgi Denchev]

Hi, Roel,

Thank you for the provided code snippets. The video seems to be showing only the code, so I am not entirely certain what the exact issue is, but I'm assuming you want to persist the expanded/collapsed state of the groups?

If that is the case, you can follow this Knowledge Base article which demonstrates such functionality:

https://docs.telerik.com/kendo-ui/knowledge-base/persist-grouped-grid-collapsed-details-state 

I've modified it to work with localStorage in the following Dojo example:

https://dojo.telerik.com/@gdenchev/UweJUnAp 

Let me know if you have any questions or in case that wasn't the issue.

Best Regards,
Georgi Denchev
Progress Telerik

[Roel]

Hi Georgi,

The video was wrong recorded. So I can imagine you don't have enough information to answer my question. Here is a better one:

https://www.loom.com/share/1e02e383fdc04d85af0e097a984a25e6

Between de grouping I do a refresh. You can't see it very clear on this video. But the idea is that I do a grouping and after the reload it's not as before the reload while it is stored in the local storage.

Roel

[Georgi Denchev]

Hi, Roel,

Thank you for the updated video.

The problem occurs because the group event is fired before the grouping is applied to the dataSource itself. In other words, when you save the options, the newest information about the groups is not updated yet. That is why you either see a missing group or an extra group when you refresh the page.

You should update the options with all groups before you save them:

              	group: function(e) {
                  if(e.groups) {
                    let options = this.getOptions();
                    options.dataSource.group = e.groups;
                    localStorage["kendo-grid-options"] = kendo.stringify(options);
                  }
                }

Dojo example:

https://dojo.telerik.com/@gdenchev/IcuquNoC 

Let me know if you have any additional questions.

[Roel]

Thanks Georgi, that did the trick :-) Have a nice day, Roel