Post
Ask Question

Order Filter Conditions In JQWidget JQX Grid

Introduction

 
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 the jQWidget JQX grid. Here I am going to share with 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 the grid is working fine. Please run your project.
     
    contains
     
    Cool, so the 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 asks, 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.
     
    Here in the updatefilterpanel we are setting the index for the filter dropdown. 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.


    Similar Articles