Filter Multi Checkboxes - Server operations being "cached"

15 posts, 1 answers
  1. Malcolm
    Malcolm avatar
    6 posts
    Member since:
    Dec 2014

    Posted 09 Apr 2015 Link to this post

    I'm using the new "Filter Multi Checkboxes" and am liking the new functionality.

    I've hooked it up to my MVC Controller with the following code which works fine apart from the fact that the controller is only called once, the first time I click to display the filter.

    ​columns
        .Bound(p => p.Category1)
        .Filterable(ftb => ftb
            .Multi(true)
            .DataSource(ds => ds
                .Read(r => r
                    .Action("Category1_Read", "Products")
                )
            )
        );

    I would like it to call the controller every time the filter is displayed, how do I achieve this?  I've tried the following as I thought it was being cached but this did not fix it.

    columns
        .Bound(p => p.Category1)
        .Filterable(ftb => ftb
            .Multi(true)
            .DataSource(ds => ds
                .Read(r => r
                    .Action("Category1_Read", "Products")
                    .Type(HttpVerbs.Post)
                )
            )
        );


    Thanks


  2. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 10 Apr 2015 Link to this post

    Hello Malcolm,

    Indeed there is just a single initial request when checkboxes are created and there is no direct way to access the dataSource that you configured for those checkboxes. 
    Here is an example that I can suggest to access the widget (if it is initialized):

    $("#gridName").data("kendoGrid").thead.find("th:eq(0)").data("kendoFilterMultiCheck").checkSource.read() //get the widget for the first column

    I hope this helps.

    Kind Regards,
    Petur Subev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Colin
    Colin avatar
    3 posts
    Member since:
    Aug 2013

    Posted 17 Apr 2015 in reply to Petur Subev Link to this post

    Hi 

    I had the same issue and another Telerik Develepor gave me this which works!

    $(".k-filterable[data-field='<field name goes here>']").data().kendoFilterMultiCheck.checkSource.read();

     

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 21 Apr 2015 Link to this post

    Thanks Colin, that is also a valid approach!

    Regards,
    Alexander Popov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Malcolm
    Malcolm avatar
    6 posts
    Member since:
    Dec 2014

    Posted 21 Apr 2015 in reply to Petur Subev Link to this post

    Thanks for this, I attached it to the click event of the filter button as below.

    // refresh filter menus
    $("#grid").find("a.k-grid-filter").click( function (e) {
        var kendoFilterMultiCheck = $(e.currentTarget).closest("th").data("kendoFilterMultiCheck");
        if(kendoFilterMultiCheck)
            kendoFilterMultiCheck.checkSource.read();
    });

  7. Greg
    Greg avatar
    19 posts
    Member since:
    May 2012

    Posted 23 Apr 2015 Link to this post

    I have same issue.

    I tried above code but it makes call to action method two times and also makes call to action method when we close the filter.

    Can you provide me code which makes call to action method only one time when we click filter?

    Please refer attached screen shots of my project.

     

  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 27 Apr 2015 Link to this post

    Hi Greg,

    This is expected with the current configuration. Basically, you should somehow differentiate whether the menu is opened or not. For example:
    <script>
        $("#grid a.k-grid-filter").click(function (e) {
            var kendoFilterMultiCheck = $(e.currentTarget).closest("th").data("kendoFilterMultiCheck");
            if (kendoFilterMultiCheck && kendoFilterMultiCheck.popup && kendoFilterMultiCheck.popup.wrapper.css("display") == "none")
                kendoFilterMultiCheck.checkSource.read();
        });
    </script>


    Regards,
    Alexander Popov
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  9. Greg
    Greg avatar
    19 posts
    Member since:
    May 2012

    Posted 27 Apr 2015 in reply to Alexander Popov Link to this post

    Thanks a lot.
  10. Greg
    Greg avatar
    19 posts
    Member since:
    May 2012

    Posted 12 Jul 2015 in reply to Greg Link to this post

    Hi,

    The above code is great when we have grid id available.

    In my case, I need this code for Hierarchy Grid means sub/ child grid where grid id is dynamic.

    Currently I tried the below code to register above method but it failed. Can you please suggest other way?

    <script>
        var expandedRow_MemberDetail;
        function detailExpand_ParentMemberDetail(e) {              

           // Get child grid id
            var childGrid = e.detailRow.find(".k-grid").data().kendoGrid;       

           $("#" + childGrid.element[0].id + " a.k-grid-filter").click(function (e) {
                var kendoFilterMultiCheck = $(e.currentTarget).closest("th").data("kendoFilterMultiCheck");           

                if (kendoFilterMultiCheck && kendoFilterMultiCheck.popup && kendoFilterMultiCheck.popup.wrapper.css("display") == "none")
                    kendoFilterMultiCheck.checkSource.read();
            });
         }

  11. Greg
    Greg avatar
    19 posts
    Member since:
    May 2012

    Posted 14 Jul 2015 in reply to Alexander Popov Link to this post

    Hi,

    The above code is great when we have grid id available.
    In my case, I need this code for Hierarchy Grid means sub/ child grid where grid id is dynamic.
    Currently I tried the below code to register above method but it failed. Can you please help me?

    <script>
         var expandedRow_MemberDetail;
         function detailExpand_ParentMemberDetail(e) {              
           // Get child grid id
             var childGrid = e.detailRow.find(".k-grid").data().kendoGrid;       
           $("#" + childGrid.element[0].id + " a.k-grid-filter").click(function (e) {
                 var kendoFilterMultiCheck = $(e.currentTarget).closest("th").data("kendoFilterMultiCheck");           
                if (kendoFilterMultiCheck && kendoFilterMultiCheck.popup && kendoFilterMultiCheck.popup.wrapper.css("display") == "none")
                     kendoFilterMultiCheck.checkSource.read();
             });
          }

  12. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 15 Jul 2015 Link to this post

    Hello,

    The problem seems to be in the way you obtain the reference to the detail grid. It should read:
    var childGrid = e.detailRow.find(".k-grid").data("kendoGrid");

    Instead of:
    var childGrid = e.detailRow.find(".k-grid").data().kendoGrid;
     
    I hope this helps.

    Regards,
    T. Tsonev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Greg
    Greg avatar
    19 posts
    Member since:
    May 2012

    Posted 15 Jul 2015 in reply to T. Tsonev Link to this post

    Thanks for your quick response.

    I tried but it could not work.

    Please refer some screen shot that may help you to figure out the issue.

    Thanks in advance.

  14. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 17 Jul 2015 Link to this post

    Hello,

    Thanks for sharing the screenshots. Everything seems fine, I can't spot anything obviously wrong.
    Do you get any specific errors when stepping through the detailExpand_MemberDetail method?

    Also, you might try the following simpler code to locate the filter in the child grid:
           $("a.k-grid-filter", e.detailRow).click(function (e) {
                var kendoFilterMultiCheck = $(e.currentTarget).closest("th").data("kendoFilterMultiCheck");           
                if (kendoFilterMultiCheck && kendoFilterMultiCheck.popup && kendoFilterMultiCheck.popup.wrapper.css("display") == "none")
                    kendoFilterMultiCheck.checkSource.read();
            });


    Notice that we don't need the actual child grid instance specifically for this handler.

    Does this make sense?

    Regards,
    T. Tsonev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  15. Colin
    Colin avatar
    3 posts
    Member since:
    Aug 2013

    Posted 30 Sep 2015 in reply to T. Tsonev Link to this post

    Hi I'm not sure if this applies to this thread or not.
    Im successfully saving the state of the kendo grid and restoring the grids state when the user revisits the page.
    The issue Im having is with the kendo numeric textbox custom filter.

    My code that i have assigned to a numeric column is 

    {
        field: "importLocatorID",
        title: "Log #",
        width: 90,
        filterable: {
                         ui: function (element) {
                               element.kendoNumericTextBox({
                                       format: "#####",
                                       decimals: 0,
                                       spinners: false
                               });
                          },
                     },
                     attributes: { style: "text-align:right;" }
                },

    This code renders fine as a kendo numeric textbox without spinners and decimals etc on the first request, but once the user leaves the page, grid options are saved and comes back to the page , the kendo numerictextbox filter looses its settings and appears as a spinner control with decimals after loading the grid options from pagestate.

    Obviously the kendo numeric textbox and its format settings are not being saved.

    How can i solve this?

     

  16. Colin
    Colin avatar
    3 posts
    Member since:
    Aug 2013

    Posted 01 Oct 2015 in reply to Colin Link to this post

    In response to my post above, we found a workaround by first retrieving the last gridstate, then assigning the grids columns to the last gridstate and then calling setoptions on the grid with the  gridstate.

     

    // When returning back the page, get last grid state 
    var gridState = window.sessionStorage[key];

    // If gridstate exists parse the gridstate and set it to the the grid
     if (gridState) {

                        var parsedState = JSON.parse(gridState);
                        parsedState.columns = grid.columns; // Workaround: Will render the numerictextbox properly 
                        grid.setOptions(parsedState);

                    }

     // Save the the state of the grid to session storage before leaving the page
     $(window).on('beforeunload', function () {
        // window.sessionStorage[key] will not contain numerictextbox filterable ui config! Function will not stringify.
                 window.sessionStorage[key] = kendo.stringify(grid.getOptions()); 

                    });​

Back to Top
UI for ASP.NET MVC is VS 2017 Ready