Combine default and multi checkbox select in single column filter popup UI

[Charlie]

Hello, I'm new to Telerik and I wanted to know how I could create a filter pop up with both multi check box filter with the default filter below it. After browsing some examples, I know we can customize a filter for a particular column

filterable: {
  ui: function(element){
    element.<kendo library>{}
  }
}

This only allows one filter mechanic, I was looking for functionality something similar to RadGridView for Silverlight like the image attached. 

 How could I customize my filter pop up to work with two filter mechanics?

 

Thanks,

C

[Plamen]

Hello,

You can refer to this help topic where a similar functionality is implemented. Here is an updated page that looked similar to the image you sent.

Regards,
Plamen
Telerik

 

 

[Charlie]

Thanks for your reply Plamen, your implementation has shed alot of light for me.

I'm currently trying to make use of the default filter, below the check box. So I'm building the filter object myself. I'm stuck with multi-level filtering - that is, if I want to filter by a few check boxes, the default filter below should implement the filter on top of the already filtered rows from check boxes. 

Here's the little snippet I've edited: Dojo Snippet

Currently I am using checkbox Chang and Chai to test first level filter, works great.

Then I am using Contains: ang  as my keyword level two filter. The rows that return right now are [Chang, Ravioli Angelo], the first level filter is ignored and the second is used. The filter I've been using is:

 

dataSource.filter({
  logic:'and',
  filters:[
    {
      logic:'or',
      filters: [
        {
          field: "ProductName",
          operator: 'eq',
          value: 'Chai', // this guy should be filtered out by our second level filter
          filters:[
            {
              logic:'and', // this is where the second level filter, begins,, we filter this by specifying our 'ang' keyword
              filters: [
                {
                  field: "ProductName",
                  operator: 'contains',
                  value: 'ang'
                }
              ]
            }
          ]
        },
        {
          field: "ProductName",
          operator: 'eq',
          value: 'Chang', // this guy should be included in our second level filter
          filters:[
            {
              logic:'and',  // this is where the second level filter, begins,, we filter this by specifying our 'ang' keyword
              filters: [{ // if I need a second text box clause, I just add it here
                field: "ProductName",
                operator: 'contains',
                value: 'ang' // its using this filter as the only filter.
              }]
            }
          ]
        }
      ]
    }
  ]
});

 

If I proceed with using the second text box below the checkbox list, then I need to extend the depth of the filter tree where the leaf filter node logic is determined by the [And/Or] drop down and the all objects that are checked (Chang, Chai) need have be included in this filter.

 

Method of Test - Even though I hard coded the filter object

1. Select filter for Product Name
2. Check off Chang and Chai
3. Select Contains in the first drop down
4. Enter 'ang' in the first textbox
5. Thats it for now, leave the rest as it is. 

Expected row to return: Chang​

[Charlie]

My Logic was off, sorry I got, ignore that post. Thanks for your help

[Amreena]

Hi Charlie,

I have the same requirement. were you able to fix the issue? 

Kindly help me if you have successfully created this custom filtering.

 

Thanks,

Amreena 

[Alex Hajigeorgieva]

Hello, Amreena,

My colleague Plamen has provided a Dojo with a multi-filter check and a FilterMenu implemented. Is there anything that does not work as expected in it?

http://dojo.telerik.com/@zdravkov/oLuVu

If you just needed to filter out some options (in case there are a lot of checkboxes), you could add a filterable.search configuration, which will help you to reduce the number of options by using "contains":



Could you let us know what seems to be the issue that you are facing so we can provide a suggestion for the concrete scenario?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Amreena]

Hi Alex,

Thanks for your reply. 

I need to provide two different filters for a single column. One is the default filter and the other is multi-checkbox filter.

I could either create the same filter you shared but it only work if I use check boxes and not when I use the default filter. Or I can add a toggle button in the filter menu pop up and let the user choose which filter she wants to use. I have tried to implement the second approach. The filtered data showed just for a sec and then it undo the filter itself.

Here's my code: 

<div id="example">
      <div id="grid"></div>
      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                  }
                }
              },
              pageSize: 20,
              serverPaging: true,
              serverFiltering: true,
              serverSorting: true
            },
            height: 550,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: [{
              field:"OrderID",
              filterable: false
            },
                      "Freight",
                      {
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:MM/dd/yyyy}"
                      }, {
                        field: "ShipName",
                        title: "Ship Name"
                      }, {
                        field: "ShipCity",
                        title: "Ship City"
                      }
                     ],
            filterMenuInit:onFilterMenuInit
          });

          function onFilterMenuInit(e){
            if(e.field == 'ShipName'){
              e.container.html('');
              $('<button class="" id="showdefault" type="button">Show Default </button>')
                .appendTo(e.container)
                 .kendoButton()
                .bind('click', function(e,d){
                 $("#checkboxlist").hide()
                $("#operator").show()
                   $(".k-dropdown").show()
                  $("#value").show()
                })
                $('<button class="" id="showlist" type="button">Checkbox list </button>')
                .appendTo(e.container)
                .kendoButton()
                .bind('click', function(e,d){
                this.enable 
                $("#operator").hide()
                $(".k-dropdown").hide()
                 $("#value").hide()
                $("#checkboxlist").show()
               
                })
                
              

             // for(var i = 0; i < 1; i++){
                $('<div id="operator">')
                  .appendTo(e.container)
                  .kendoDropDownList({
                  dataTextField:'name',
                  dataValueField:'value',
                  dataSource: [
                    {name:'Is equal to',value:'eq'},
                    {name:'Is not equal to',value:'neq'},
                    {name:'Contains',value:'contains'}

                  ],

                })

                $('<input class="k-textbox" id="value">')
                  .appendTo(e.container)
              //}
              var dataSource = this.dataSource;
        var field = e.field;
        var checkboxesDataSource = new kendo.data.DataSource({
          data: uniqueForField(dataSource.data(), field)
        });


       // var helpTextElement = e.container.children(":first").children(":first");
        // helpTextElement.nextUntil(":has(.k-button)").remove();
        var element = $("<div id='checkboxlist' class='checkbox-ontainer'>").appendTo(e.container).kendoListView({
          dataSource: checkboxesDataSource,
          template: "<div><input type='checkbox' value='#:" + field + "#'/>#:" + field + "#</div>"
        });


              var submit = $('<button type="submit" class="k-button k-primary">Filter</button>')

              $('<div >')
                .append(submit)
                .append('<button type="reset" class="k-button">Clear</button>')
                .appendTo(e.container)
e.container.find("[type='submit']").click(function(e){
                var grid =  $('#grid').data('kendoGrid');
                
                if( $("#checkboxlist").css('display') == 'none'){
                 var logic = $('#operator').data('kendoDropDownList').value();
                 var filterQuery =grid.dataSource.filter()!= null ? grid.dataSource.filter() : null;

                  if(filterQuery){
                    removeFiltersForField(filterQuery, field)
                  }else{
                    filterQuery= {logic:'and', filters:[]};
                  }
                  var shipNameFilter = {logic:logic, filters:[]};
                  
                  shipNameFilter.filters.push({
                    field:field,
                    operator: $('#operator').data('kendoDropDownList').value(),
                    value: $('#value').val()
                  })
                  
                   filterQuery.filters.push(shipNameFilter)

                grid.dataSource.filter(filterQuery);
                }
                else{
                
                var filter =dataSource.filter() || { logic: "and", filters: [] };

                  
                var fieldFilters = $.map(element.find(":checkbox:checked"), function(input) {            
                      return {
                        field: field,
                        operator: "eq",
                        value: input.value
                      };
                    });
                    
                    if (fieldFilters.length) {
            removeFiltersForField(filter, field);
                      filter.filters.push({
                        logic: "or",
                        filters: fieldFilters
                      });

                    }
                    
                    //lterQuery.filters.push(shipNameFilter)
                    grid.dataSource.filter(filter);
                }
               
             
              })

            }}
        });
function uniqueForField(data, field) {
        var map = {};
        var result = [];
        var item;
        for (var i = 0; i < data.length; i++) {
          item = data[i];
          if (!map[item[field]]) {
            result.push(item.toJSON());
            map[item[field]] = true;
          }
        }
        return result;
      }
        function removeFiltersForField(expression, field) {
          if (expression.filters) {
            expression.filters = $.grep(expression.filters, function(filter) {
              removeFiltersForField(filter, field);
              if (filter.filters) {
                return filter.filters.length;
              } else {
                return filter.field != field;
              }
            });
          }
        }
      </script>
    </div>

Can you please tell why it undo the filter after a second?

Regards,

Amreena

[Alex Hajigeorgieva]

Hello, Amreena,

Thank you very much for the provided runnable snippet.

It seems that by preventing the default behaviour of the button with a type submit was all that was needed to stop the second read which was wiping the filters out:

e.container.find("[type='submit']").click(function(e){
    e.preventDefault();
  // custom filtering logic
 });

Here is a runnable Dojo that you can test with:

http://dojo.telerik.com/@bubblemaster/iRiVOcAp

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Amreena]

Thank you so much Alex.

It working perfectly now.