Force refresh of multi filter options

20 posts, 0 answers
  1. Marc
    Marc avatar
    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.

  2. Marc
    Marc avatar
    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();

    }

    });    }

  3. Stefan
    Admin
    Stefan avatar
    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.
  4. Marc
    Marc avatar
    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.

     

     

  5. Marc
    Marc avatar
    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?
  6. Stefan
    Admin
    Stefan avatar
    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.
  7. Marc
    Marc avatar
    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.

  8. Marc
    Marc avatar
    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
  9. Stefan
    Admin
    Stefan avatar
    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.
  10. Marc
    Marc avatar
    128 posts
    Member since:
    Jul 2010

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

    Re-attaching code
  11. Stefan
    Admin
    Stefan avatar
    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.
  12. Marc
    Marc avatar
    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?

     

  13. Marc
    Marc avatar
    128 posts
    Member since:
    Jul 2010

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

    attached
  14. Stefan
    Admin
    Stefan avatar
    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.
  15. Marc
    Marc avatar
    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.

     

     

  16. Stefan
    Admin
    Stefan avatar
    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.
  17. Marc
    Marc avatar
    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

     

     

     

  18. Stefan
    Admin
    Stefan avatar
    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.
  19. Brandon
    Brandon avatar
    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

  20. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    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

Back to Top