Multi Check Box Filter and Persistance

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

    Posted 19 Sep 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
    233 posts

    Posted 21 Sep 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 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
    1147 posts

    Posted 27 Sep 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 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 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
    1147 posts

    Posted 29 Sep 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 in reply to Stefan Link to this post

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

    Posted 03 Oct 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.
Back to Top