This is a migrated thread and some comments may be shown as answers.

Force refresh of multi filter options

19 Answers 2563 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 31 Jul 2017, 05:27 PM

Is there an easy way to force a refresh of all the multi-filters everytime a grid is databound?

 

I'm using columnmenu and the mvc exensions if it matters.

19 Answers, 1 is accepted

Sort by
0
Marc
Top achievements
Rank 1
answered on 31 Jul 2017, 09:33 PM

In poking around, it seems like this would work. But it doesn't.

 

function onColumnMenuInit(e) {    

e.container.data("kendoPopup").bind("open",            function() {      

var filterMultiCheck = e.container.find(".k-filterable").data("kendoFilterMultiCheck");

if (filterMultiCheck) {  

  filterMultiCheck.checkSource.read();

}

});    }

0
Stefan
Telerik team
answered on 02 Aug 2017, 07:57 AM
Hello Marc,

Indeed the provided code should work if the MultiFilter has a dataSource with a read option configured as otherwise, this will return an empty filter:

http://dojo.telerik.com/AHIXom

Also, every time the Grid is rebound with the data, the filter menu read should be called to correspond to the new items in the Grid automatically.

If additional assistance is needed, please provide a fully runnable example reproducing the issue and I will gladly assist.

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.
0
Marc
Top achievements
Rank 1
answered on 02 Aug 2017, 02:38 PM

Thanks, if you really need a jsfiddle I can create one.But we are parsing an additional search form and sending the form data to the controller like this:

.Read(read => read.Action("GetData", "Controller").Data("sendAdditionalData"))

When the grid is refreshed via the ajax call, the multi-filter options are not updated to reflect the new data. Again, we are using columnmenu in these grids.

 

 

0
Marc
Top achievements
Rank 1
answered on 02 Aug 2017, 02:44 PM
Do we really need to create an additional datasource for the multi-filter? It should just be the unique values of the current grids data. How can we simply update the multi-filter to reflect the current dataset without creating another call to the server?
0
Stefan
Telerik team
answered on 04 Aug 2017, 08:25 AM
Hello Marc,

In general, the filter options will reflect the data in the Grid. If the Grid data is changed the filter options will be changed as well automatically without making a new call to the server.

Please have in mind that the values in the filter menu will be based on the Grid data, and if some values are repeating they will repeat in the filter as well. This can be changed, but it will require custom dataSource and additional logic:

http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/Filtering/grid-with-excel-like-filter

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.
0
Marc
Top achievements
Rank 1
answered on 09 Aug 2017, 05:36 PM

I've attached a solution that displays my issue.

If you search for 'Customer1' the multi-filter populates correctly. But if I then search for 'Customer2', the multi-filter still has the Customer1 options.

0
Marc
Top achievements
Rank 1
answered on 09 Aug 2017, 05:46 PM
https://www.youtube.com/watch?v=kCf_cYeBqbw&feature=youtu.be
0
Stefan
Telerik team
answered on 11 Aug 2017, 08:36 AM
Hello Marc,

Thank you for the provided video.

Could you please confirm that when the Grid is filtered by Customer1, in the filter menu only the Customer1 values are displayed, as the scrollbar size looks like all of the data is in the menu?

Also, once the data is changed, please check the Grid dataSource data, as the filter menu is using the same data for its options:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data 

Still, the mentioned solution was not present in the response, I can assume that there was an issue when attaching it.

Could you please reattach it, as I can assume that there is an additional code executed as the filter should be refresh automatically in the described scenario.

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.
0
Marc
Top achievements
Rank 1
answered on 11 Aug 2017, 02:27 PM
Re-attaching code
0
Stefan
Telerik team
answered on 15 Aug 2017, 08:13 AM
Hello Marc,

Thank you for the runnable example.

After inspecting it, I can confirm that in this scenario the FilterMenu have to be programmatically changed.

This will require programmatically creating the old DOM elements and creating the new checkboxes based on the Grid current data:

function onColumnMenuInit(e) {
    e.container.data("kendoPopup").bind("open", function () {
        var filterMultiCheck = e.container.find(".k-filterable").data("kendoFilterMultiCheck");
         
        var currentData = e.sender.dataSource.data()
        if (filterMultiCheck) {
            filterMultiCheck.container.empty();
            filterMultiCheck.checkSource.data(currentData);
            filterMultiCheck.createCheckBoxes();              
        }
    });
}

I also attached the modified example.

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.
0
Marc
Top achievements
Rank 1
answered on 15 Aug 2017, 01:13 PM

Thanks Stefan, this is sort of working, but it's creating duplicate checkboxes. Is there a quick snippet to solve this issues?

 

0
Marc
Top achievements
Rank 1
answered on 15 Aug 2017, 01:13 PM
attached
0
Stefan
Telerik team
answered on 17 Aug 2017, 06:58 AM
Hello Marc,

Creating duplicate checkbox is expected by the default behaviour of the MultiCheckBox filter.

If the desired result is to remove the duplicates then the custom approach suggested for the Exel like filter should be used.

We have the same example made for the MVC Grid as well:

http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/Filtering/grid-with-excel-like-filter

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.
0
Marc
Top achievements
Rank 1
answered on 17 Aug 2017, 01:36 PM

With due respect, why in the world would duplicates be the default behavior the whole point of an excel like checkbox filter is to display unique values. What am I missing here?

Can you please clarify what you mean by custom approach, do I need to specify a datasource for each multi-filter? We have 50 or so columns, do I need to make an ajax request for every column?

 

Attached is an excel screen clip in case there is any confusion on how an excel like filter works.

 

 

0
Stefan
Telerik team
answered on 21 Aug 2017, 07:47 AM
Hello Marc,

I completely understand your point.

It is the default because when the feature was implemented the idea was to list all the options.

As we can agree that this may not be the desired result in all of the scenarios, we created the sent How-to article which is demonstrating how to remove the duplicates and sort the filter options.

It will require setting only one sharedDataSource(not 50) and setting the same dataSource in 50 different places(we agree that this is not a perfect approach.)

We apologise for the inconvenience caused by this feature and its specifics.

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.
0
Marc
Top achievements
Rank 1
answered on 21 Aug 2017, 02:26 PM

Thanks I'm testing the approach linked below. Let me know if you think there might be some issue with it.

 

http://dojo.telerik.com/@md1037/AtOxU

 

 

 

0
Stefan
Telerik team
answered on 23 Aug 2017, 07:42 AM
Hello Marc,

The provided approach looks good, thank you for sharing it with us.

Just one thing that I want to clarify using grid.dataSource.view() will return only the items for the current page. In case all filter have to be shown when the Grid is pageable, I can suggest modifying the logic in order to cover this scenario. This will show all items when a filter is not applied, and then only the filter results after a filter is applied:

if (grid.dataSource.filter() == undefined) {
          var uniqueDsResult = removeDuplicates(grid.dataSource.data(), e.field);
}
else {
          var uniqueDsResult = removeDuplicates(grid.dataSource.view(), e.field);
}


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.
0
Brandon
Top achievements
Rank 1
answered on 09 Jul 2020, 03:48 PM

Is this the only way to refresh filters after grid loads with new data? Looks like a bug in the framework.

I tried `setDataSource` approach as Suggested Here however that caused another issue with locked column. Details on SO

0
Alex Hajigeorgieva
Telerik team
answered on 13 Jul 2020, 03:33 PM

Hi, Brandon,

It is by design that the data source for the checkboxes is obtained only once for performance reasons. Earlier in this thread there is another option that might be better suited for you - one which clears the checkboxes programmatically and refreshes the UI. You can execute it on the FilterMenuOpen event:

http://dojo.telerik.com/UhimEwIn

var fmc = e.sender.thead.find("[data-field='" + e.field + "']").data("kendoFilterMultiCheck");
fmc.checkSource.read();
fmc.container.empty();
fmc.refresh();

Let me know what you think.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Tags
Grid
Asked by
Marc
Top achievements
Rank 1
Answers by
Marc
Top achievements
Rank 1
Stefan
Telerik team
Brandon
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or