Techie Brains

Excel kind of filters in Kendo UI Grid

 In this post am explaining  how to implement excel kind of filters in kendo ui grid.
See example Bellow



Step 1:Grid intialization
var isloaded=false;
grid = $("#grid").kendoGrid({

            dataSource: {
                transport: { read: "/control/action(or your URL)" },
                schema: { data: "Data", total: "Total" },
                pageSize: 30,
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false
            }
});

Step 2:

Need to Override the required field filter functionality. So find out filter click of particular column and unbind the click event and write click for custom filter

Before that write DIV for showing our custom filter

<div id="CustomFilterDiv" class="filterDropdown">
 </div>
<style>
    .filterDropdown {
        display:none;
        position: absolute;
        border: 2px solid gray;
        background-color: white;
        padding: 5px;
    }
</style>







Here is the code for overriding filter click Functionality




$("#grid").find(".k-grid-filter").each(function () {
            var parent = $(this).parent();
            var filterList;
           
            //alert(parent.attr("data-field"));
            switch (parent.attr("data-field")) {
                case "Status"://*your data filed name*//
                   $(this).unbind("click").click(function () {

                        fillCheckBoxes();
                        filterList = $("#CustomFilterDiv");
                        var offset = $(this).offset();
 filterList.css('top', offset.top + $(this).height()+10)
.css('left', offset.left + $(this).width()).slideDown();
                        return false;
                    });
                    break;
                           
            }
});








Step3:

Here we need fill our dropdownDIV with checkboxes of all unique values of a selected column

  function fillCheckBoxes() {  
       if (!isloaded) {  
         $("#CustomFilterDiv").empty();  
         $("#CustomFilterDiv").append('<input type="checkbox" style="" name="StatuschkAll" value="checkAll" checked /><span>Select All</span><br />');  
         var data = grid.data("kendoGrid").dataSource.data();  
         var uniqueValues = '';  
         for (var i = 0; i < data.length; i++) {  
           var dataItem = data[i].Status;  
           if (!(uniqueValues.indexOf(dataItem)>=0))  
           {  
             uniqueValues += dataItem + ",";  
             $("#CustomFilterDiv").append('<input type="checkbox" style="" name="Status" value="' + dataItem + '" checked /><span>' + dataItem + '</span><br />');  
           }  
         }  
         $("#CustomFilterDiv").append(' <br /><input type="button" id="applyStatusFilter" value="Apply" /><input type="button" id="cancelStatusFilter" value="Cancel" />');  
         //filter apply click  
         $("#applyStatusFilter").click(function () {  
           setDsFilter(generateDsFilter());  
           $("#CustomFilterDiv").slideUp();  
         });  
         //filter cancel click  
         $("#cancelStatusFilter").click(function () {  
           $("#CustomFilterDiv").slideUp();  
         });  
         //check all filter  
         $('input[name="StatuschkAll"]:checkbox').live("change", function () {  
           var ischecked = $(this).is(":checked");  
           $('input[name="Status"]:checkbox').each(function () {  
             this.checked = ischecked;  
           });  
         });  
         //uncheck/check parent all  
         $('input[name="Status"]:checkbox').live("change", function () {  
           $('input[name="StatuschkAll"]:checkbox')[0].checked = $('input[name="Status"]:checkbox:checked').length == $('input[name="Status"]:checkbox').length;  
         });  
         if(uniqueValues!='')  
            isloaded = true;  
       }  
     }  
     $("#grid").click(function () {  
       $("#CustomFilterDiv").slideUp();  
     });  
   }