Grid Filter Default Operator

41 posts, 0 answers
  1. Zack
    Zack avatar
    6 posts
    Member since:
    Sep 2012

    Posted 27 Aug 2012 Link to this post

    For my users, the Contains operator seems much more useful than the Is Equal To. I changed the order of the operators when creating a Kendo Grid and that allowed me to make the Contains operator the default option in a previous release. When I updated my project to use version 2012.2.710, this now doesn't function. I have attached an example project.

    How can I change this functionality to support a different default filter option?

  2. Ross
    Ross avatar
    11 posts
    Member since:
    Aug 2012

    Posted 03 Oct 2012 Link to this post

    Did you ever get this figured out?  I need "contains" to be the default column search too!  I'm running version 2012.2.913.  Please help Kendo!

  3. Mahmood
    Mahmood avatar
    3 posts
    Member since:
    Apr 2012

    Posted 15 Oct 2012 Link to this post

    I need it too. If anyone has figured it out please post it here so everybody can use it. thanks.

  4. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 15 Oct 2012 Link to this post

    Though there are maybe better solutions, you can use this in the dataBound callback of your grids:

    dataBound: function() {
       $('.k-header').each(function() {
          $(this).data('kendoFilterMenu').popup.bind('open', function() {
             var select = this.element.find('select:first');
             var option = select.children('option:contains("Contains")');
             if(option.length > 0) {
                select.data('kendoDropDownList').value(option.attr('value'));
             }
          });
       });
    }

  5. Zack
    Zack avatar
    6 posts
    Member since:
    Sep 2012

    Posted 15 Oct 2012 Link to this post

    I think your code makes it so that it always selects the "Contains" option. So if the user wants to select starts with and filters the grid by that, but then wants to go back into that filter and change the query string, if they aren't paying attention they will perform a contains filter instead of a starts with filter.

  6. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 15 Oct 2012 Link to this post

    You're right Zack, but that can be fixed like this:

    dataBound: function() {
       $('.k-header').each(function() {
          $(this).data('kendoFilterMenu').popup.bind('open', function() {
             if(!$(this.element).data('alreadyOpened')) {
                var select = this.element.find('select:first');
                var option = select.children('option:contains("Contains")');
                if(option.length > 0) {
                   select.data('kendoDropDownList').value(option.attr('value'));
                }
                $(this.element).data('alreadyOpened', true);
             }
          });
       });
    }
    Or something similar to use like a flag property, and if needed when you submit the filterMenu form set it to false, and after opening it once set it to true.

  7. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2012 Link to this post

    Nohinn,

    I pasted your code in my grid and it did not do anything to my filter dropdowns.  There doesn't seem to be anything custom I would need to change for grid, should just be a copy and paste.  Am I missing something?  Didn't work at all, my filters do not default to "contains".

    UsersView.prototype._RenderGrid = function (dataSource) {
        $("#usersGrid").kendoGrid({
            dataSource: dataSource,
            sortable: {
                mode: "multiple",
                allowUnsort: true
            },
            scrollable: true,
            filterable: true,
            resizable: true,
            reorderable: true,
            columnMenu: true,
            columns: [
                { field: "Id", title: "Id", width: "90px" },
                { field: "FirstName", title: "First Name" },
                { field: "LastName", title: "Last Name" },
                { field: "LoginId", title: "Login Id" },
                {
                    command: [
                        { template: '<div class="editButton k-button k-button-icontext" style="width: 26px; min-width: 0px;" title="Edit User"><span class="k-icon k-edit"></span></div>' },
                        { template: '<div class="deleteButton k-button k-button-icontext" style="width: 26px; min-width: 0px;" title="Delete User"><span class="k-icon k-delete"></span></div>'}],
                    width: "78px"
                }
            ],
            toolbar: [{
                template: '<div class="addButton k-button k-button-icontext k-grid-AddUserLogin" title="Add User"><span class="k-icon k-add"></span>Add User Login</div>'
            }],
            dataBound: function () {
                $('.k-header').each(function () {
                    $(this).data('kendoFilterMenu').popup.bind('open', function () {
                        if (!$(this.element).data('alreadyOpened')) {
                            var select = this.element.find('select:first');
                            var option = select.children('option:contains("Contains")');
                            if (option.length > 0) {
                                select.data('kendoDropDownList').value(option.attr('value'));
                            }
                            $(this.element).data('alreadyOpened', true);
                        }
                    });
                });
            }
        });
    };

  8. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 16 Oct 2012 Link to this post

    Hello Ross, in your case as you're using the column menu, the code needs a little modification for it to work.

    dataBound: function() {
       $('.k-header').each(function() {
          $(this).data('kendoColumnMenu').popup.bind('open', function() {
             if(!$(this.element).data('alreadyOpened')) {
                var select = this.element.find('select:first');
                var option = select.children('option:contains("Contains")');
                if(option.length > 0) {
                   select.data('kendoDropDownList').value(option.attr('value'));
                }
                $(this.element).data('alreadyOpened', true);
             }
          });
       });
    }

  9. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2012 Link to this post

    Nohinn,

    Thanks for the quick response.  I've been trying to figure this one out for weeks so I really appreciate your efforts.  I'm getting the attached error after inserting your new suggestion.  Thanks!

  10. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 16 Oct 2012 Link to this post

    I can see the error, however I don't know why it fires an error as it works at the end.
    However to avoid the error you can do this:

    dataBound: function() {
       $('.k-header').each(function() {
          if($(this).data('kendoColumnMenu')) {
             $(this).data('kendoColumnMenu').filterMenu.popup.bind('open', function() {
                if(!$(this.element).data('alreadyOpened')) {
                   var select = this.element.find('select:first');
                   var option = select.children('option:contains("Contains")');
                   if(option.length > 0) {
                      select.data('kendoDropDownList').value(option.attr('value'));
                   }
                   $(this.element).data('alreadyOpened', true);
                }
             });
          }
       });
    }

  11. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2012 Link to this post

    Nohinn,

    Thanks, and this did change the default value to "contains" but now when I enter a value it does not filter my grid results (grid is empty when I apply a contains filter).  This is the same result we've had with other ways of trying it too.  Also, the example you gave doesn't seem sticky, meaning that it is contains on the first time in but if I go back into the filter menu after a search it no longer to contains.   Here's another method we tried but with no success.

    dataBound: function () {
                setTimeout(function () {
                    $('#usersGrid th').each(function (index, column) {
                        var columnMenu = $(column).data('kendoColumnMenu');
                        if (columnMenu && columnMenu.filterMenu) {
                            var filterMenu = columnMenu.filterMenu;
                            var dropDownMenu = $(filterMenu.element)
                                .find('select[data-bind="value: filters[0].operator"]').data('kendoDropDownList');

                            if (dropDownMenu) {
                                dropDownMenu.select(function (x) { return x.text === "Contains"; });
                            }
                        }
                    });
                });
            }

    It seems that this is a major oversight by Kendo and I hope they give us more flexibility/fix in future releases.

  12. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 16 Oct 2012 Link to this post

    Ok, sorry Ross and anyone else, I have been working on a sample, so far I got it working, but let me know if there is any error:
    http://jsbin.com/ojevoc/1/edit

    As you will see now what was before in the dataBound callback is now after the grid initialization and delayed 1 ms (important). You can try to filter for example the ShipCountry column with contains "ra" and you will see the results matches the ones you can get in the original demo: http://demos.kendoui.com/web/grid/column-menu.html

  13. Igor
    Igor avatar
    140 posts
    Member since:
    Jan 2011

    Posted 17 Oct 2012 Link to this post

    Hey Nohinn!

    I have summarized your code - thanks allot for it!
    here is the sample for both cases (with and without columnMenu):

    $(document).ready(function () {
     
          setTimeout(function () {
     
              $('.k-header').each(function () {
     
                  if ($(this).data('kendoFilterMenu')) {
                      var header = $(this).data('kendoFilterMenu');
                      $(this).data('kendoFilterMenu').popup.bind('open', function () {
                          if (!$(this.element).data('alreadyOpened')) {
                              var select = this.element.find('select:first');
                              var option = select.children('option:contains("Contains")');
                              if (option.length > 0) {
                                  header.filterModel.filters[0].operator = "contains";
                                  select.data('kendoDropDownList').value(option.attr('value'));
                              }
                              $(this.element).data('alreadyOpened', true);
                          }
                      });
                  }
               
                  if ($(this).data('kendoColumnMenu')) {
                      var header = $(this).data('kendoColumnMenu');
                      $(this).data('kendoColumnMenu').filterMenu.popup.bind('open', function () {
                          if (!$(this.element).data('alreadyOpened')) {
                              var select = this.element.find('select:first');
                              var option = select.children('option:contains("Contains")');
                              if (option.length > 0) {
                                  header.filterMenu.filterModel.filters[0].operator = "contains";
                                  select.data('kendoDropDownList').select(option.index());
                              }
                              $(this.element).data('alreadyOpened', true);
                          }
                      });
                  }
              });
          }, 1);
      });

  14. Igor
    Igor avatar
    140 posts
    Member since:
    Jan 2011

    Posted 17 Oct 2012 Link to this post

    I got the only problem when user press "Clear" in the filter menu - it will reset filter back to the "Is equal" option selected.
    In that case i propose to bind to the "Clear" button "click" event and reset "alreadyOpened" flag to false

  15. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 17 Oct 2012 Link to this post

    Here you have the code updated:
    http://jsbin.com/ojevoc/3/edit 

  16. Igor
    Igor avatar
    140 posts
    Member since:
    Jan 2011

    Posted 17 Oct 2012 Link to this post

    Great, Nohinn!

  17. Ross
    Ross avatar
    11 posts
    Member since:
    Aug 2012

    Posted 17 Oct 2012 Link to this post

    Hmm...I guess I'm not understanding because all the grid filters are defaulted to "Is Equal To" in your example on the demo site.  All filters on my grid column headers need to default to "Contains" and I'm not seeing any successful examples yet.

  18. Igor
    Igor avatar
    140 posts
    Member since:
    Jan 2011

    Posted 17 Oct 2012 Link to this post

    Ross,

    if you go here http://jsbin.com/ojevoc/3/edit
     and open second column filter (ShipCountry) - you will see default "Contains".
    seems like you are trying to see the filter for numbers, which does not have "contains" operator.

  19. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    K, I tried in Chrome and seems to work.  However, this has issues in Firefox.  Can anyone else confirm in different browsers?

  20. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 17 Oct 2012 Link to this post

    Indeed, there was an issue with firefox, try the updated version: http://jsbin.com/ojevoc/5/edit 
    Tested with chrome and firefox and working both of them.


  21. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    EDIT: Looks like ShipName resets to "Is Equal To" after doing two searches on ShipCountry.  I did a filter on ShipCountry for ger and then did a ShipCountry filter for fr and then I noticed that ShipName reset to "Is Equal To". 

    Dang!  It's getting so close and I so much appreciate your help on this.  I did find one bug using Chrome.  When I filter ShipCountry using the default "Contains" it appears to work.  However, after doing this first filter it seems to mess up the default filter for ShipName because it's now set to "Is Equal To". 

  22. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 17 Oct 2012 Link to this post

    Another fix, for IE (and to avoid the undefined error):  http://jsbin.com/ojevoc/6/edit 

    Ross let me know if I'm missing something as I cannot reproduce your issue:
    1) I open the column menu for shipcountry, then I open the filter menu and I filter Contains ger, click on the filter button.
    2) Reopen the menus, Contains fr and click on the filter button
    3) I open the menus for ShipName but for me at least it says Contains, and if I filter with any value I type it works as it should

  23. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    Nohinn,

    Thanks so much for working through this.  Here's exactly what I did.  I went to http://jsbin.com/ojevoc/6/edit and did a filter on ShipCountry for "fr" and it filtered the grid correctly.  Click on the ShipName filter and it still seems to be set to "Contains" (but dont actually do a filter here).  Now, change the ShipCountry filter to be "ger" and it filters the grid.  Now go check ShipName and it's defaulted back to "Is Equal To".  That should be the step by step I'm doing to show the "Contains" default is not sticky after performing a few searches on other columns.

  24. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 17 Oct 2012 Link to this post

    Ok, I could reproduce it now, here is a hotfix:
    http://jsbin.com/ojevoc/7/edit 

    Let me know if there is any error

  25. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    Thank you Nohinn!  That fixed the error and I will let you know if I find any others.  You da man!

  26. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    After adding this code to my page I'm still seeing some filters reset to "Is Equal To".  However, I've not been able to nail down a consistent pattern of why/how.  My grid has three columns that I'm filtering on and when I do many different combinations of filters and also clearing of filters I see some column filters reset to "Is Equal To".  I think the "clear" filter may be related but still cant nail down a pattern for you.

  27. Igor
    Igor avatar
    140 posts
    Member since:
    Jan 2011

    Posted 17 Oct 2012 Link to this post

    Ross, what is the browser version you are using?
    i dont have any issues so far using the last one editiion from this thread in Chrome and Firefox.

  28. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 17 Oct 2012 Link to this post

    Chrome, version 22.0.1229.79

    So on my grid I can produce the error by doing this.

    Add filters from left to right (FirstName-->LastName-->Username)
    Clear filters from right to left (Username-->LastName-->FirstName)

    After all filters have been applied and then cleared (using the clear button) then I go back and see what the default filter is for Username and LastName and they are set to "Is Equal To". 

    I cannot produce this on your example though and I'm not sure if it's because I've got 3 columns vs. 2 that I've filtered on.  Thoughts?

  29. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 18 Oct 2012 Link to this post

    Ya, so I think it's this code below.

    header.filterMenu.form.bind('reset', function () {
         $(this).parent().data('kendoFilterMenu').popup.element.data('alreadyOpened', false);
    });

    I've noticed on my grid that when I click the third column (right most) that hitting the clear filter button resets the columns to the left back to "Is Equal To" (columns 1 &2).  Nohinn, I'm wondering if you can add another/few more text search columns to your example and see if this is reproduced on your test page too?  Thanks!

  30. Ross
    Ross avatar
    17 posts
    Member since:
    Oct 2012

    Posted 18 Oct 2012 Link to this post

    Nohinn,

    I tweaked your example here.  http://jsbin.com/ojevoc/8/edit and you'll notice there are two columns ShipName.  I also produced the error I'm getting on my grid by doing the following.

    • On the first ShipName add a contains filter with "g".
    • On the second ShipName column choose "Clear"
    • Check the default filter on the first ShipName column and you'll see it's set back to "Is Equal To" now.  But the second ShipName is correctly set to "Contains" still.  This is similiar to what I'm getting on my grid with multiple text type column filters.

    Screen shot attached.

Back to Top