Sync with Kendo UI Professional

Author: Kendo Bot

docs/knowledge-base/grid-multiple-filter-criterion.md

@@ -32,7 +32,7 @@ How can I create a filter widget with a multiple filter criterion in the Grid?
 1. When the `click` event of the **Submit** button is clicked, build the filter query and filter the data source by using the [`flter`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter) method.
 
 ```dojo
-    <h1>Ship Name column has custom filte UI</h1>
+    <h1>Ship Name column has custom filter UI</h1>
     <div id="example">
       <div id="grid"></div>
       <script>
@@ -85,13 +85,15 @@ How can I create a filter widget with a multiple filter criterion in the Grid?
 
           function onFilterMenuInit(e){
             if(e.field == 'ShipName'){
-              e.container.html('');
+              e.container.empty();
+              e.container.append("<div class='k-filter-menu-container'></div>");
+              e.container = e.container.find(".k-filter-menu-container")
               $('<div id="logic">')
                 .appendTo(e.container)
                 .kendoDropDownList({
                 dataTextField:'name',
                 dataValueField:'value',
-                dataSource: [{name:'AND',value:'and'},{name:'OR',value:'or'}],
+                dataSource: [{name:'OR',value:'or'},{name:'AND',value:'and'}],
 
               })
 
@@ -110,46 +112,65 @@ How can I create a filter widget with a multiple filter criterion in the Grid?
 
                 })
 
-                $('<input class="k-textbox" id="value'+i+'">')
+                $('<input class="k-input k-textbox k-input-solid k-input-md k-rounded-md" id="value'+i+'">')
                   .appendTo(e.container)
               }
 
 
-              var submit = $('<button type="submit" class="k-button k-primary">Filter</button>')
-
-              $('<div >')
+              var submit = $('<button  class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary">Filter</button>');
+              var clear = $('<button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">Clear</button>');
+              
+              var grid =  $('#grid').data('kendoGrid');
+              
+              $('<div class="k-action-buttons">')
                 .append(submit)
-                .append('<button type="reset" class="k-button">Clear</button>')
+                .append(clear)
                 .appendTo(e.container)
 
-              submit.on('click', function(){
-                var grid =  $('#grid').data('kendoGrid');
+              submit.on('click', function(ev){
+                ev.preventDefault();
                 var logic = $('#logic').data('kendoDropDownList').value();
                 var filterQuery =grid.dataSource.filter();
 
                 if(filterQuery){
                   removeFiltersForField(filterQuery,'ShipName')
                 }else{
-                  filterQuery= {logic:'and', filters:[]};
+                  filterQuery= {logic:'or', filters:[]};
                 }
 
                 var shipNameFilter = {logic:logic, filters:[]};
 
                 for(var i =0; i < 3; i++){
-                  shipNameFilter.filters.push({
-                    field:'ShipName',
-                    operator: $('operator'+i).data('kendoDropDownList').value(),
-                    value: $('value'+i).val()
-                  })
+                  var value = $('#value'+i).val();
+
+                  if(value) {
+                    shipNameFilter.filters.push({
+                      field:'ShipName',
+                      operator: $('#operator'+i).data('kendoDropDownList').value(),
+                      value: value
+                    })
+                  }
                 }
 
                 filterQuery.filters.push(shipNameFilter)
-
+                
                 grid.dataSource.filter(filterQuery);
+                e.container.parent().data("kendoPopup").close();
+              });
+							
+              clear.on("click", function(ev) {
+                ev.preventDefault();
+                
+                 var filterQuery =grid.dataSource.filter();
 
-
-              })
-
+                if(filterQuery){
+                  removeFiltersForField(filterQuery,'ShipName')
+                }
+                
+                grid.dataSource.filter(filterQuery);
+                
+                e.container.parent().data("kendoPopup").close();
+              });
             }}
         });