FilterBarMode Not Working

[Matt Abercrombie]

v15.2.0.46

http://jsplayground.syncfusion.com/prpmpaap

In the example above, I've set the filterBarMode to "immediate". However, the grid is still performing filtering as "onenter" (see$("#Grid").ejGrid("instance").model.filterSettings in the example above).

It seems that you can set the mode after initialization and it works as expected.

Please advise.

[Thavasianand Sankaranarayanan]

Hi Matt, 

Thanks for contacting Syncfusion support. 

Query : Immediate filtering is not working with filterbar and filterbar template in a grid. 

 

We have analyzed your query and we suspect that you have use the filterbar template and the filterbar in the same grid in different columns. So we suggest you to use the filterbar template for the other columns also in your grid to get the immediate filtering in grid. By using of keyup event of the filterbar of “OrderID” column and using setTimeout() method, we have done the immediate filtered with that column. 

 

Refer the below code example. 

 

 

  <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: ej.DataManager(window.gridData), 

                allowPaging: true, 

                allowFiltering: true, 

                filterSettings: {  showFilterBarStatus: true, statusBarWidth: 500, filterBarMode: "immediate" }, 

                columns: [ 

                      { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75, filterBarTemplate: {create:"Order_create", read:"Order_read", write:"Order_write" } }, 

                               } 

                 -----   

                     

                 ] 

       

                ---- 

             }); 

 

        }); 

 

    function Order_create(args) { 

        return "<input>" 

    } 

 

    function Order_write(args) { 

        var gridObj = $("#FlatGrid").ejGrid("instance"); 

        $("#OrderID_filterBarcell").addClass('e-ejinputtext'); 

 

        $("#OrderID_filterBarcell").keyup(function () { // keyup event for filterbar of OrderID column 

 

            setTimeout(Order_read(args),3000); // set 3 seconds to start the immediate filtering in the OrderID column 

        }); 

    } 

 

    function Order_read(args) { 

        var gridObj = $("#FlatGrid").ejGrid("instance"); 

        gridObj.filterColumn(args.column.field, "contains", args.element.val(), "and", true) // using filterColumn method, filter the OrderID column 

    } 

     

 

 </script> 

 

 

We have prepared a simple JsPlayground sample in the following link. 

 

JsPlayground link: http://jsplayground.syncfusion.com/1fs5euf1 

 

Refer the help documentation. 

 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:filtercolumn 

Link: https://help.syncfusion.com/js/grid/filter#filterbar-template 

 

Link: https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filterbarmode 

 

General solution for the keyUp event and setTimeout() method. 

 

Link: https://api.jquery.com/keyup/ 

 

Link: https://www.w3schools.com/jsref/met_win_settimeout.asp 

 

Regards, 

Thavasianand S.