Grid Filter Default Operator

[Zack]

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?

[Ross]

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!

[Mahmood]

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

[Nohinn]

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

         }

      });

   });

}

[Zack]

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.

[Nohinn]

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.

[Ross]

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

[Nohinn]

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

         }

      });

   });

}

[Ross]

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!

[Nohinn]

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

            }

         });

      }

   });

}

[Ross]

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.

[Nohinn]

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

[Igor]

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

  });

[Igor]

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

[Nohinn]

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

[Igor]

Great, Nohinn!

[Ross]

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.

[Igor]

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.

[Ross]

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

[Nohinn]

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.

[Ross]

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". 

[Nohinn]

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

[Ross]

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.

[Nohinn]

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

Let me know if there is any error

[Ross]

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

[Ross]

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.

[Igor]

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.

[Ross]

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?

[Ross]

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!

[Ross]

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.

[Igor]

Ross,

any luck fixing that?

[Ross]

Negative Igor.  We need a grid with 4-5 columns where the above code is inserted.  It all works pretty good except when you set a filter on the right most column.  Then when you click the clear button on that right most column it resets all columns to the left of it back to "Is Equal To".  It doesn't occur in the demo with only two columns but when more columns are added I've been able to produce reliably. 

[Nohinn]

In the sample you provided Ross, the problem lies in that both ShipName columns are sharing the same filterModel (and presumably that's the way kendo works as you're displaying twice the same field).
You can test what I'm saying if you filter the first ShipName column by contains "g" and after filtering do this with your developer tools:

$('#grid').find('.k-header:eq(2)').data('kendoColumnMenu').filterMenu

// Look for the first filter in the filterModel, it will say operator = "contains" and value = "g"

$('#grid').find('.k-header:eq(3)').data('kendoColumnMenu').filterMenu

// If you look the first filter in the filterModel you will see it has too operator = "contains" and value = "g", though you have not filtered that column (but you filtered that field)

So, to sum up, in this case where you repeat a field twice I don't know right now if there is any quick fix for it. If your problem happens without using twice a field let me know so we can change your sample and work with it.

[Ross]

Nohinn,

Thanks for jumping back on this.  My example with duplicate ShipName columns is a total hack and not really replicating what I'm trying to describe.  My real project for work has unique columns and the error I described in my last post occurs.  Can you modify your example to have 4-5 unique columns and then run through the test I indicated above?  Thanks again!

Ross

[Igor]

Ross, i have about 8 columns in the grid working perfectly with Nohinn's solution.
Seems like you need to provide the sample to reproduce the problem.

[Ross]

Igor, is there any way for you to post yours so I can test it?

[Igor]

Ross,
i have exact the same as here: http://jsbin.com/ojevoc/8/edit but the datasource config is different (more properties and columns)
i believe we can modify it 

[Ross]

I've setup another example using Customers instead of Orders.  Cant seem to get the filter setup right though.  It's like the columns I've specified are not being reflected properly in the actual demo and I dont see the filtering.  If we can get this working we should have more columns to test our filtering and see if I can replicate the error.  Any help would be appreciated getting this Customers demo working.

http://jsbin.com/ojevoc/13/edit

[Nohinn]

Ok, hotfix with customers grid:
http://jsbin.com/ojevoc/14/edit 

I have not tested it too much but looks like it is working fine again.

[Ross]

Nohinn,

Thanks for the response.  I think you meant example 15 :)  http://jsbin.com/ojevoc/15/edit  Works pretty good in Chrome, doesn't render properly in FF.  I will do more testing and let you know. Thanks!

Ross

[Rihards]

It did not work correctly on Kendo ASP.net MVC Wrapper. It set dropdown to Contains, but filtering did not work. Problem was with header variable. Header variable where you assign operator was last column, not column that has filter menu opened. Reason was that header was declared at the begin of function. 

  setTimeout(function(){

    var header;

I deleted that line and added var in both header variable assignment.

var header = $(this).data('kendoColumnMenu');

.......

var header = $(this).data('kendoFilterMenu');

 
And all worked great.