Multi Check Box Filter and Persistance

14 posts, 0 answers
  1. X
    X avatar
    12 posts
    Member since:
    Sep 2015

    Posted 19 Sep 2017 Link to this post

    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

     

  2. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 21 Sep 2017 Link to this post

    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:
    Please, give the above article a try and let me know if it works for you.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. X
    X avatar
    12 posts
    Member since:
    Sep 2015

    Posted 25 Sep 2017 Link to this post

    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.
  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 27 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. X
    X avatar
    12 posts
    Member since:
    Sep 2015

    Posted 28 Sep 2017 Link to this post

    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

  6. X
    X avatar
    12 posts
    Member since:
    Sep 2015

    Posted 28 Sep 2017 Link to this post

    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.
  7. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 29 Sep 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. X
    X avatar
    12 posts
    Member since:
    Sep 2015

    Posted 29 Sep 2017 in reply to Stefan Link to this post

    Is there an example for how to do this?!
  9. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 03 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Lucy
    Lucy avatar
    17 posts
    Member since:
    Nov 2016

    Posted 29 May 2019 Link to this post

    Hello,

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

    Thank you

    Lucy

  11. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 29 May 2019 Link to this post

    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?
    If the above article did not help, could you please elaborate on the scenario of your project?


    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  12. Lucy
    Lucy avatar
    17 posts
    Member since:
    Nov 2016

    Posted 29 May 2019 in reply to Preslav Link to this post

    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

     

  13. Preslav
    Admin
    Preslav avatar
    591 posts

    Posted 31 May 2019 Link to this post

    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:
    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:
    Please, give this a try, and let me know if this works for you.


    Regards,
    Preslav
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  14. Lucy
    Lucy avatar
    17 posts
    Member since:
    Nov 2016

    Posted 05 Jun 2019 in reply to Preslav Link to this post

    Thank you. This works as I wanted.

    Lucy

Back to Top