Filter Multi Checkboxes - Server operations being "cached"

[Malcolm]

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

[Petur Subev]

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

 

 

[Colin]

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();

 

[Alexander Popov]

Thanks Colin, that is also a valid approach!

Regards,
Alexander Popov
Telerik

 

 

[Malcolm]

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();
});

[Greg]

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.

 

[Alexander Popov]

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

 

 

[Greg]

Thanks a lot.

[Greg]

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();
        });
     }

[Greg]

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();
         });
      }

[T. Tsonev]

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

[Greg]

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.

[T. Tsonev]

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

[Colin]

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?

 

[Colin]

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()); 

                });​