JavaScript

Order Filter Conditions In JQWidget JQX Grid

I recently came across a situation that the grid filter condition must be shown as ‘equal’ for any type of filter like string, numeric, etc. So I have done this requirement by using some in-built functionalities of jQWidget JQX grid. Here I am going to share you that. I hope you will like it.

To load a grid from a JSON, you can follow the steps as discussed in this article: Load jQWidget JQX Grid From JSON.

Background

If you are new to JQWidget JQX Grid, please find out here.

Using the code

I hope you have implemented your grid as shown in that article. Now I guess your page will be looking like this.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Order Filter Conditions In JQX Grid - Sibeesh Passion</title>  
  6.     <script src="jquery-1.9.1.js"></script>  
  7.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>  
  8.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>  
  9.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>  
  10.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>  
  11.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>  
  12.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>  
  13.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>  
  14.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
  15.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
  16.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
  17.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
  18.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
  19.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
  20.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
  21.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
  22.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
  23.     <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
  24.     <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
  25.     <script type="text/javascript">  
  26.     $(document).ready(function() {  
  27.         // prepare the data  
  28.         var data = {  
  29.             datatype: "json",  
  30.             datafields: [{  
  31.                 "name": "AreaCode",  
  32.                 "type": "string"  
  33.             }, {  
  34.                 "name": "Revenue",  
  35.                 "type": "number"  
  36.             }],  
  37.             //id: 'id',  
  38.             url: "jsonData.txt"  
  39.         };  
  40.         $("#jqxgrid").jqxGrid({  
  41.             source: data,  
  42.             columns: [{  
  43.                 "text": "Area Code",  
  44.                 "dataField": "AreaCode",  
  45.                 "cellsalign": "left",  
  46.                 "cellsformat": "d"  
  47.             }, {  
  48.                 "text": "Revenue",  
  49.                 "dataField": "Revenue",  
  50.                 "cellsalign": "right",  
  51.                 "cellsformat": "c2"  
  52.             }],  
  53.             pageable: true,  
  54.             filterable: true,  
  55.             sortable: true  
  56.         });  
  57.     });  
  58.     </script>  
  59. </head>  
  60.   
  61. <body class='default'>  
  62.     <h2>Order Filter Conditions In JQX Grid - Sibeesh Passion</h2>  
  63.     <div id="jqxgrid"></div>  
  64. </body>  
  65.   
  66. </html>  
Now let us make sure that grid is working fine. Please run your project.

contains
Cool, so grid is loaded. Now have you noticed that the filter condition shows by default is ‘Contains’ ? Now we are going to change that. You might be thinking what kind of requirement is this, but trust me is a client assk, we must do anything at any cost.

Now we are going to add three functions to the grid settings.

 

  • rendered
  • updatefilterconditions
  • updatefilterpanel

So our grid settings will look as follows.

  1. $("#jqxgrid").jqxGrid({  
  2. source: data,  
  3. columns: [{  
  4.     "text": "Area Code",  
  5.     "dataField": "AreaCode",  
  6.     "cellsalign": "left",  
  7.     "cellsformat": "d"  
  8. }, {  
  9.     "text": "Revenue",  
  10.     "dataField": "Revenue",  
  11.     "cellsalign": "right",  
  12.     "cellsformat": "c2"  
  13. }],  
  14. pageable: true,  
  15. filterable: true,  
  16. sortable: true,  
  17. rendered: function() {  
  18.     var localizationobj = {};  
  19.     filterstringcomparisonoperators = ['equal', 'empty', 'not empty', 'contains', 'does not contain', 'starts with', 'ends with', 'null'];  
  20.     filternumericcomparisonoperators = ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'];  
  21.     filterdatecomparisonoperators = ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'];  
  22.     filterbooleancomparisonoperators = ['equal', 'not equal'];  
  23.     localizationobj.filterstringcomparisonoperators = filterstringcomparisonoperators;  
  24.     localizationobj.filternumericcomparisonoperators = filternumericcomparisonoperators;  
  25.     localizationobj.filterdatecomparisonoperators = filterdatecomparisonoperators;  
  26.     localizationobj.filterbooleancomparisonoperators = filterbooleancomparisonoperators;  
  27.     // apply localization.  
  28.     $("#jqxgrid").jqxGrid('localizestrings', localizationobj);  
  29. },  
  30. updatefilterconditions: function(type, defaultconditions) {  
  31.     var stringcomparisonoperators = ['EQUAL', 'EMPTY', 'NOT_EMPTY', 'CONTAINS', 'DOES_NOT_CONTAIN', 'STARTS_WITH', 'ENDS_WITH', 'NULL'];  
  32.     var numericcomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];  
  33.     var datecomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];  
  34.     var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];  
  35.     switch (type) {  
  36.         case 'stringfilter':  
  37.             return stringcomparisonoperators;  
  38.         case 'numericfilter':  
  39.             return numericcomparisonoperators;  
  40.         case 'datefilter':  
  41.             return datecomparisonoperators;  
  42.         case 'booleanfilter':  
  43.             return booleancomparisonoperators;  
  44.     }  
  45. },  
  46. updatefilterpanel: function(filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton, columnfilter, filtertype, filterconditions) {  
  47.     var index1 = 0;  
  48.     var index2 = 0;  
  49.     filtertypedropdown1.jqxDropDownList({  
  50.         autoDropDownHeight: true,  
  51.         selectedIndex: index1  
  52.     });  
  53.     filtertypedropdown2.jqxDropDownList({  
  54.         autoDropDownHeight: true,  
  55.         selectedIndex: index2  
  56.     });  
  57. }  
  58. });  
  59. });  
Here in the updatefilterpanel we are setting the index for the filter drop down. And inupdatefilterconditions and rendered functions we are applying the localization according to our requirement. Now save the changes and run your grid again, you can see the filter option ‘equal’ will be loaded as default.
result

output

That’s all we have done this requirement of ordering the jQWidget JQX grid filter conditions.

Conclusion

Did I miss anything that you may think which is needed? Have you ever wanted to do this requirement? Did you try jQWidget yet? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

If you have any questions, then please mention it in the comments section.

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs