Force refresh of multi filter options in Kendo UI for jQuery Grid

Marc

128 posts

Member since:
Jul 2010

Posted 31 Jul 2017 Link to this post

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.

Marc

128 posts

Member since:
Jul 2010

Posted 31 Jul 2017 in reply to Marc Link to this post

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

}

}); }

Stefan

Admin

3039 posts

Posted 02 Aug 2017 Link to this post

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.

Marc

128 posts

Member since:
Jul 2010

Posted 02 Aug 2017 Link to this post

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.

Marc

128 posts

Member since:
Jul 2010

Posted 02 Aug 2017 in reply to Marc Link to this post

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?

Stefan

Admin

3039 posts

Posted 04 Aug 2017 Link to this post

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.

Marc

128 posts

Member since:
Jul 2010

Posted 09 Aug 2017 in reply to Stefan Link to this post

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.

Marc

128 posts

Member since:
Jul 2010

Posted 09 Aug 2017 in reply to Marc Link to this post

https://www.youtube.com/watch?v=kCf_cYeBqbw&feature=youtu.be

Stefan

Admin

3039 posts

Posted 11 Aug 2017 Link to this post

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.

Marc

128 posts

Member since:
Jul 2010

Posted 11 Aug 2017 in reply to Stefan Link to this post

Re-attaching code

Filter.zip

Stefan

Admin

3039 posts

Posted 15 Aug 2017 Link to this post

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.

filter-modified.zip

Marc

128 posts

Member since:
Jul 2010

Posted 15 Aug 2017 in reply to Stefan Link to this post

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

Marc

128 posts

Member since:
Jul 2010

Posted 15 Aug 2017 in reply to Marc Link to this post

attached

dupe.png

Stefan

Admin

3039 posts

Posted 17 Aug 2017 Link to this post

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.

Marc

128 posts

Member since:
Jul 2010

Posted 17 Aug 2017 Link to this post

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.

Excel.png

Stefan

Admin

3039 posts

Posted 21 Aug 2017 Link to this post

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.

Marc

128 posts

Member since:
Jul 2010

Posted 21 Aug 2017 Link to this post

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

Stefan

Admin

3039 posts

Posted 23 Aug 2017 Link to this post

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.

Brandon

6 posts

Member since:
Jan 2016

Posted 09 Jul 2020 in reply to Stefan Link to this post

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

Alex Hajigeorgieva

Admin

1082 posts

Posted 13 Jul 2020 Link to this post

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