One filter for two datasource fileds

[Flotman]

Hello,

I have a grid with client template that holds two values from datasource. Is it possible to filter this two fileds at once using one filter menu (e.g adding secondary filter on the fly when bounded column is filtered)?

[Nikolay]

Hello Tomasz,

I could suggest applying a custom filter in columns.filterable.ui handler where the desired column fields can be included in the filter of the current one. For example:

columns.Bound(e => e.City)
                .ClientTemplate("#=FirstName# #=LastName#")
                .Filterable(filterable => filterable.UI("nameFilter"))
                .Width(200);
..
function nameFilter(element) {
          var textbox = element.kendoTextBox({
            change: function(e) {
              var value = e.sender.value();
              var dataSource = $("#grid").data("kendoGrid").dataSource;
              var filter = { logic: "or", filters: [] };
              filter.filters.push({ field: "FirstName", operator: "eq", value: value }, { field: "LastName", operator: "eq", value: value });
              if (value) {
                dataSource.filter(filter);
              }
              else {
                dataSource.filter({});
              }
            }
          })
          }

Please find a runnable demo demonstrating the above in the following link:

• https://dojo.telerik.com/EgiqIqAV

Let me know fi you have any questions.

Regards,
Nikolay
Progress Telerik

[Perry]

Why do you have to hide filter button for this to work?

    $(e.container).find('.k-button').hide();

What if you want to have a filter and clear button on the custom filter?  (As it's not easily apparent that you have to press tab to set the filter)

[Mihaela]

Hi Perry,

I have updated the Dojo sample to keep the "Filter" and "Clear" buttons in the filter menu as follows:

            filterMenuInit:function(e){ //Remove the "filterMenuInit" event handler
              /*if(e.field == "FirstName") {
                $(e.container).find('.k-button').hide();
              }*/
            },
            filter: function(e){ //Handle the "filter" event of the Grid
              //If the "FirstName" column is filtered, prevent the default event action
              if(e.field == "FirstName") {
                e.preventDefault();
                if(e.filter == null) { //If the "Clear" button is clicked, reset the filters;
                  e.sender.dataSource.filter({});
                }
              }
            }

Here is the revised Dojo:

https://dojo.telerik.com/EnOLiMex