Multi Check Box Filter and Persistance

[X]

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

 

[Preslav]

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

[X]

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.

[Stefan]

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

[X]

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

[X]

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.

[Stefan]

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

[X]

Is there an example for how to do this?!

[Stefan]

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

[Lucy]

Hello,

I'm having the same issue as the original poster. Do you have an example on how to do this? 

Thank you

Lucy

[Preslav]

Hi Lucy,

Did you check the "Filtering Is Not Properly Persisted after Saving and Loading the State of the Grid" article from my first reply?

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

If the above article did not help, could you please elaborate on the scenario of your project?


Regards,
Preslav
Progress Telerik

[Lucy]

Hi Preslav,

I think my issue is with a onColumnMenuInit function I have that sorts the Multi Filter A-Z.

I've made an example based on the doc you sent over:
https://dojo.telerik.com/uBAkUceQ

Make one of the columns grouped, then save the grid and then load it. Try and go to one of the columns and it errors in the console.

Thanks

Lucy

 

[Preslav]

Hello Lucy,

Indeed, when the original dataSource is sorted, the dataSource of the filter menu cannot create the checkboxes. To overcome this problem, use an approach similar to the one outlined here:

• https://docs.telerik.com/kendo-ui/knowledge-base/sort-multi-checkbox-filter#sort-multiple-checkbox-filter

I modified the Dojo with the following line:

columnMenuInit: function(e) {
  var content = e.container.find(".k-filterable");
  var filterMultiCheck = e.container.find(".k-filterable").data("kendoFilterMultiCheck");
  filterMultiCheck.container.empty();

  filterMultiCheck.checkSource.sort({ field: e.field, dir: "asc" });

  filterMultiCheck.checkSource.group(null);

  filterMultiCheck.checkSource.data(filterMultiCheck.checkSource.view().toJSON());
  filterMultiCheck.createCheckBoxes();
  var text = e.container.find(".k-filterable input[value=null]").parent("label").text;
},

You could check the modified version here:

• https://dojo.telerik.com/uBAkUceQ/4

Please, give this a try, and let me know if this works for you.


Regards,
Preslav
Progress Telerik

[Lucy]

Thank you. This works as I wanted.

Lucy