grid.setOptions with functions within the grid

[Infraestructura TI]

Hello,

I am trying to implement a complex grid that has 4 functions defined, on dataBound, columnMenuInit, and 2 on change. We noticed that, when using setOptions/getOptions from local storage, the functionality of our column menu is lost (an error about t[e] not being defined pops up).

Now, I have researched and apparently the JSON.stringify we have to apply before storing does away with the functions, this is, they are lost when setting the options to local storage: however, I was trying to implement a workaround I saw while researching, where basically the function was stored separately, and added after parsing the rest of the options before loading them to the grid again.

My problem now is that the function is getting added to the parsed options object as what I believe is an Unicode string (the representation of it on Chrome dev tools comes up as a string instead of a function). The error thrown when trying to JSON.parse it is that there's a "u" token at position 1, so that's what leads me to think in this way.

My question is: is there any way I can assign the function stored separately on local storage to grid options before applying them to the grid, in order to not lose any functionality? I would be happy just storing and re-adding the columnMenu function (I guess I could extend this to the other ones if it's possible, later on). What would be your advice in this case?

Thank you!

[Infraestructura TI]

Hello, I have solved the function re-adding in a simple way: I get them in variables in memory right before loading grid options, and then re-apply to the grid (the functions themselves shouldn't change, since it is the same grid).

However, I still get the following error:

Uncaught TypeError: t[e] is not a function
at Function.te.create

I am guessing there's an event handler that's not properly being loaded or attached to the grid. How could I ensure that the grid responds to clicks normally? Also, a detail I forgot to mention in my initial post is that some columns have a filter with multi checkbox from remote datasource. These are the columns failing when I open the header menu. Other columns with less elaborate filters open menu without issue.

Thanks in advance!

[Dimiter Topalov]

Hi Hector,

There are couple of options to preserve the functions in the Grid options, as listed in the corresponding API reference for the Grid setOptions() method:

"You have two options to avoid this limitation: use a custom implementation to serialize JavaScript functions, or add the function references back to the deserialized configuration object before passing it to the setOptions method."

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

Please make sure to reattach the functions to the Grid configuration object before it is passed to the setOptions() method.

I hope this helps, but if the issue persists, please send us an isolated runnable project, similar to the ones from our online demos (you can use the Kendo UI Dojo), where we can observe the undesired behavior, so we can try suggesting a solution, more suitable for the specific scenario (if one is available). Thank you in advance.

Regards,
Dimiter Topalov
Telerik by Progress

[Infraestructura TI]

Hello Dimiter, thanks for replying.

The situation we have is basically what I try to describe in the following dojo example:

http://dojo.telerik.com/OnIhUh

Of course, this is a simpler version. In my version I have a remote datasource for the grid (from database, via a read action from an MVC controller). Each column that would be filterable with multi box does also have its own MVC read action datasource (pre-filtered to show only distinct elements and so on).

We have been able to pinpoint the issue and we have concluded that the error presents itself only on the multibox filters for columns, when the grid is loaded from a previous save. The error is restricted to columns with a remote datasource. I tried defining static datasources for some columns and they didn't experience the issue.

In this example, I tried to mimic a remote definition via the ContactName column, however, it is working properly on the example (I assume it is because I'm using the same source from your online data samples, not sure how to define a different one in this case). The only difference of this example with our problem is that the data comes from a different datasource than that of the grid, for each column.

Any ideas would be greatly appreciated, since right now we are sort of leaning towards removing this feature entirely or just using static filters for some of our fields, which is not a satisfying solution.

Regards,

[Dimiter Topalov]

Hi Hector,

Thank you for the detailed explanation and the runnable project. I was able to reproduce the described error by providing a different DataSource to the respective columns.filterable options.

The issue is caused by the fact that when the saved options are applied to the Grid, a new (or previously declared) DataSource instance should be provided to the options for this column's multicheckbox filter, as the saved options have an object that looks like a DataSource instance, but actually is not, and when the Grid tries to treat this object as an actual DataSource instance, this results in the discussed error.

I have modified the dojo to illustrate a sample approach for resolving the problem:

http://dojo.telerik.com/eXURo

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Infraestructura TI]

Hello Dimiter, thanks for replying.

Although the example on the dojo does not work (I assume it's only for illustration purposes), I implemented the example on my project with satisfactory results.

Furthermore, since we were moving to other kind of filters (autocomplete filters with filterable.ui property) I tried to reassign the full filterable object, instead of just filterable.ui or fitlerable.dataSource (I have a small loop that re-assigned the filterable.ui properties, based on the column name, in case the user moved the columns -can't use indexes there-, and modified it to re-assign the full filterable property object). The results were satisfactory as well, and now both kinds of filters are saved and loaded without trouble.

I do have an issue combining customized filters (those with autocomplete element) but that's perhaps a matter for another post after further investigation from me.

Nevertheless, thanks for the quick and precise support!

Regards,