Hi,

I have implemented the filter multi check as described here:

http://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes

and I have persisted the grid using the methods described here:

http://demos.telerik.com/aspnet-mvc/grid/persist-state

For the checkboxes, I have a method server side which returns the filter checkboxes as Json.

Code Snippet:

@(Html.Kendo().Grid<DefectNotificationReportItemDto>()
                      .Name("grid")
                      .Columns(columns =>
                      {
                          columns.Bound(p => p.MaterialCode).Width(140).Filterable(f => f.Multi(true).ItemTemplate("itemTemplate").Search(true).DataSource(source => source.Read(r => r.Action("GetMaterialCodes", "DefectNotificationReport", new {  selectedSnapshotDate = Model.ToString("dd MMM yyyy") }))));
                          columns.Bound(p => p.MaterialDescription).Width(300).Filterable(f => f.Multi(true).ItemTemplate("itemTemplate").Search(true).DataSource(source => source.Read(r => r.Action("GetMaterialDescriptions", "DefectNotificationReport", new {  selectedSnapshotDate = Model.ToString("dd MMM yyyy") }))));
                          columns.Bound(p => p.BatchNumber).Width(140).Filterable(f => f.Multi(true).ItemTemplate("itemTemplate").Search(true).DataSource(source => source.Read(r => r.Action("GetBatchNumbers", "DefectNotificationReport", new {  selectedSnapshotDate = Model.ToString("dd MMM yyyy") }))));

}

function itemTemplate(e) {
    if (e.field === "all") {
        //handle the check-all checkbox template
        return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>";
    } else {
        //handle the other checkboxes
        return "<div class='kendo-custom-filter'><span><label><input type='checkbox' name='" + e.field + "' value='#=Value#'/><span>#= Text #</span></label></span></div>";
    }
}

Everything works fine, until the state of the grid is reloaded. If I then click on a filter I get a JavaScript error:

VM12456:3 Uncaught ReferenceError: BatchNumber is not defined

    at eval (eval at compile (kendo.all.js:194), <anonymous>:3:209)
    at Object.render (kendo.all.js:175)
    at Object.proxy [as render] (jquery-3.1.1.js:502)
    at init.createCheckBoxes (kendo.all.js:37796)
    at init.refresh (kendo.all.js:37762)
    at init.options.forceUnique.checkChangeHandler (kendo.all.js:37614)
    at init.trigger (kendo.all.js:124)
    at init._process (kendo.all.js:6965)
    at init.success (kendo.all.js:6710)
    at success (kendo.all.js:6637)

I find all of your features are great in isolation but when combined this sort of things happens. Please can you tell me why this happens and how I can fix the issue?

Thanks

 

Hello,

Based on your post, I would suggest checking the approach outlined in the "Filtering Is Not Properly Persisted after Saving and Loading the State of the Grid" article:

• http://docs.telerik.com/kendo-ui/knowledge-base/grid-filters-are-not-correctly-persisted-after-saving-and-loading-the-grid-state

Please, give the above article a try and let me know if it works for you.


Regards,
Preslav
Progress Telerik

No this does not work. I get the same error. It appears your dynamic filters and saving/loading the state are incompatible together. Please provide a solution.

Hello,

We tested this approach in our demo Grid with MultiCheckBoxes and it is working as expected. The filters are correctly persisted and no error occurred in the console:

http://demos.telerik.com/aspnet-mvc/grid/filter-multi-checkboxes

From the error, it seems that the BatchNumber field is accessed in a template and it is not available at that point.

We will be expecting the additional information and we will gladly assist further. We do understand that providing an example can be time-consuming, but the issue seems specific and the example will help us inspect it in details.

Regards,
Stefan
Progress Telerik

Hi, please find attached my sample.

1. Load the page.

2. Check the filters are populated under the Name column.

3. Then move Location to the first column.

4. Save the grid.

5. Then F5 the page.

6. Then press load button.

7. You will find if you filter under "Name" the filter's are not populated anymore and there is a JavaScript error.... Uncaught ReferenceError: Name is not defined

Please help me resolve this issue.

Thanks

And here is the sample. I can't upload the full solution so have given you the view and controller. Please let me know if you need anything else.

Hello,

Thank you for the example.

After inspecting it I can confirm that the issue occurs due to one of the specifics on the setOptions method:

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

"JSON.stringify() cannot serialize function references (e.g. event handlers), so if stringification is used for the retrieved Grid state, all configuration fields, which represent function references, will be lost. 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."

This is causing the itemTemplate function to not be called, and when the function is not called, the menu is searching for Name value instead of the Value and Text values set in the template, and as the GetTeams method is returning data with Value and Text properties, the Name is undefined.

In this scenario, either the suggestions to avoid the function limitation has to be used or to remove the itemTemplate.

Regards,
Stefan
Progress Telerik

Is there an example for how to do this?!

Hi,

Currently, we do not have the same example as its implementation is not specific for Kendo UI. It will require using the suggested third-party library super-json or by adding the function reference to a deserialized object:

http://www.kristofdegrave.be/2012/07/json-serialize-and-deserialize.html

Regards,
Stefan
Progress Telerik