Search and Filter Grid Column At The Same Time

[Lee]

I have a grid here: Dojo

It has filtering on the columns and a search bar on top. When I use both the grid behaves unexpectedly.

For example, use the column filter to get only columns with names that contain "Doe". 

This returns John and Jane Doe.

Then in the search box type "33"

This returns John Doe and Lois Lane. At the same time it highlights the filter icons for Name and Age.

If I click the filter icon for Name it says "contains 33". None of the names contain "33" though. I also don't have my previous "Doe" filter applied to the name column anymore. 

I would expect that I would only have 1 result. John Doe because his last name is Doe and he is 33 years old.

I would also expect that the filter icon for age is not highlighted since I never filtered on that specific column.

If I do it the other way around, type "Doe" in the search first and then filter by "33" in the age I get the results I was expecting.

If I hide a column using the select columns button in the upper left while it is filtered, the filter stays applied even though the column is hidden.

How do I solve these issues?

[Georgi Denchev]

Hello, Lee,

Thank you for the provided Dojo.

First, let me explain how the Grid searching works. The search functionality is not a standalone process. Underneath, the logic simply applies a "contains" filter to all of the columns(thus simulating a search). You can include only certain columns in the search by specifying search fields.

It is important to keep in mind that even if you search only some of the columns, the entire dataSource filter is overridden. This means that you will lose the filters applied through the menu, even if you don't include the columns in the search field. One way to overcome this is by customizing the search input logic to add the "contains" filters from the search on top of the filters applied through the menu.

This can be seen in the following Dojo:

https://dojo.telerik.com/@gdenchev/IYiXUFeW 

In the example above, the Search is enabled for the ShipName and ShipCity columns. If you type "Rei" in the input, the Grid will narrow down the records to just 5. Then you can go to one of the other columns(for example Freight) and apply an additional filter(let's say greater than 10). You'll be left with two records that fit both criteria.

I've also updated your Dojo with the above logic:

https://dojo.telerik.com/@gdenchev/izaVUtur 

The search is enabled only for the "age" column. If you apply the same contains filter to name column (contains Doe) and you type in 33 in the search, only one record will be returned.

As for the second problem, we have a Knowledge Base article which demonstrates how you can remove a filter for a particular field:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-remove-filters 

You can combine the logic with the columnHide event and remove the filters for the hidden column. I've included this logic in the second Dojo as well.

Best Regards,
Georgi Denchev
Progress Telerik

[Lee]

Thank you, however this doesn't completely solve the issue. I would like the search box to apply to all fields. Also, in my actual table I have modified the filter menu to be a dropdown box rather than a text input. Applying a filter of doe to the age column makes the filter button turn orange yet since "doe" isn't an age the dropdown is empty (because doe isn't in the list). Also, in your edit of my dojo above when the user deletes the text in the search box no records show. 

[Georgi Denchev]

Hi, Lee,

Unfortunately, with the current implementation of the search functionality, this is not possible. You can't mix searching with the filterMenu as both filters are applied to the same field and there is no way for the dataSource to know which one is coming from a search and which one is coming from the menu.

You need to either disable the searching of certain fields(as shown above) or leave the searching for all fields, but then the filter menu filters will be overridden.

I've updated the dojo example that wasn't working:

https://dojo.telerik.com/@gdenchev/ataDIXir 

One additional condition was missing, please accept my apologies for the bad example:

          // Remove the "search" filter object if the search is empty.
          if($.isEmptyObject(expression)) {
            combinedFilter.splice(0, 1);
          }
          
          // Apply the filter.
          grid.dataSource.filter(combinedFilter);

Let me know if you have any additional questions.

Best Regards,

Georgi