Searching functionality is not properly working in kendo grid

Question

I have a grid and search text box . I also have four checkbox after clicking on them grid will filter . But when i click on one filter when i search any element whole grid data is displaying. How to resolve this.?

Answer 1

 $("#search").keyup(function() {
     var selecteditem = $('#search').val();

     var kgrid = $("#grid").data("kendoGrid");


     selecteditem = selecteditem.toUpperCase();
     var selectedArray = selecteditem.split(" ");
     if (selecteditem) {
         kgrid.dataSource.filter({
             field: "MP.emp_first_name",
             operator: "eq",
             value: selecteditem
         }, {
             field: "MS.position_status",
             operator: "eq",
             value: selecteditem
         });


         var orfilter = {
             logic: "or",
             filters: []
         };
         var andfilter = {
             logic: "and",
             filters: []
         };

         $.each(selectedArray, function(i, v) {
             if (v.trim() == "") {} else {
                 $.each(selectedArray, function(i, v1) {
                     if (v1.trim() == "") {} else {
                         orfilter.filters.push({
                             field: "MP.emp_first_name",
                             operator: "contains",
                             value: v1
                         }, {
                             field: "MS.position_status",
                             operator: "contains",
                             value: v1
                         });

                         andfilter.filters.push(orfilter);
                         orfilter = {
                             logic: "or",
                             filters: []
                         };
                     }

                 });
             }
         });
         kgrid.dataSource.filter(andfilter);
         //    kgrid.dataSource.filter(orfilter);
     } else {
         kgrid.dataSource.filter({});
     }

 });




 $(".maf-filter").on('change', function(e) {
 var kgrid = $("#grid").data("kendoGrid");
 var andfilter = {
     logic: "and",
     filters: []
 };
 var orfilter = {
     logic: "or",
     filters: []
 };
 //alert($("#maf_filter_open").prop('checked'));
 if ($("#maf_filter_open").prop('checked')) {

     orfilter.filters.push({
         field: "MPOSSTATUS.position_status",
         operator: "eq",
         value: "ABC"
     });

 }

 if ($("#maf_filter_closed").prop('checked')) {
     orfilter.filters.push({
         field: "MPOSSTATUS.position_status",
         operator: "eq",
         value: "DEF"
     });

 }

 if ($("#maf_filter_cancelled").prop('checked')) {
     orfilter.filters.push({
         field: "MPOSSTATUS.position_status",
         operator: "eq",
         value: "GHI"
     });

 }

 if ($("#maf_filter_potential").prop('checked')) {
     orfilter.filters.push({
         field: "MPOSPOTENTIALCANDIDATE.emp_first_name",
         operator: "neq",
         value: ""
     }, {
         field: "MPOS.by_whom",
         operator: "neq",
         value: ""
     });

 }

 if (orfilter.filters.length > 0)
     andfilter.filters.push(orfilter);


 kgrid.dataSource.filter(andfilter);
 });
 //End- dynamic filtering



 }); //end of document ready

Answer 2

<form role="form" class="form-inline">
<label><input type="checkbox" name="maf_filter_open" id="maf_filter_open" class="k-checkbox maf-filter" value="O" checked /> ABC</label>
<label><input type="checkbox" name="maf_filter_closed" id="maf_filter_closed" class="k-checkbox maf-filter" value="F" checked /> DEF</label>
<label><input type="checkbox" name="maf_filter_cancelled" id="maf_filter_cancelled" class="k-checkbox maf-filter" value="C"  checked />GHI </label>
<label><input type="checkbox" name="maf_filter_potential" id="maf_filter_potential" class="k-checkbox maf-filter" value="P" checked /> JKL</label>