Products

Show or Hide Columns in JQWidgets JQX Grid

Introduction

Today we will learn how to show/hide columns in JQWidgets JQX Grid. I hope you like it.

Please see this article Show/Hide Columns in JQWidgets JQX Grid in my blog.

Background

If you are new to JQWidget JQX Grid, Please learn more here.

Using the code

Here I am using Visual Studio 2012. We will have a text file with the JSON data, you can use this file or you can explicitly load JSON data from the server side.

So let us start

First of all we must include the necessary files for the grid as in the following:

  1. <script src="jquery-1.9.1.js"></script>  
  2. <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>  
  3. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>  
  4. <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>  
  5. <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>  
  6. <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>  
  7. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>  
  8. <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>  
  9. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
  10. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
  11. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
  12. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
  13. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
  14. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
  15. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
  16. <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
  17. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
  18. <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
  19. <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  

No we can start the grid implementation. For that create a ready function and add the code as follows.

  1. < script type = "text/javascript" > $(document).ready(function() {  
  2.     var source = {  
  3.         datatype: "json",  
  4.         datafields: [{  
  5.             "name": "AreaCode",  
  6.             "type": "string"  
  7.         }, {  
  8.             "name": "Revenue",  
  9.             "type": "number"  
  10.         }],  
  11.         url: "jsonData.txt"  
  12.     };  
  13.     var dataAdapter = new $.jqx.dataAdapter(source);  
  14.     $("#jqxgrid").jqxGrid({  
  15.         width: 600,  
  16.         source: dataAdapter,  
  17.         ready: function() {  
  18.             // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.  
  19.             $('#readymessage').show();  
  20.         },  
  21.         columnsresize: true,  
  22.         columns: [{  
  23.             "text": "Area Code",  
  24.             "dataField": "AreaCode",  
  25.             "cellsalign": "left",  
  26.             "cellsformat": "d",  
  27.             hidden: true  
  28.         }, {  
  29.             "text": "Revenue",  
  30.             "dataField": "Revenue",  
  31.             "cellsalign": "right",  
  32.             "cellsformat": "c2"  
  33.         }],  
  34.         pageable: true,  
  35.         filterable: true,  
  36.         sortable: true  
  37.     });  
  38. }); < /script> 

Now if you note, you can determine I have provided hidden:true for the grid column implementation. So we have made that column hidden.

  1. columns: [{ "text": "Area Code", "dataField": "AreaCode", "cellsalign": "left", "cellsformat": "d", hidden:true }, { "text": "Revenue", "dataField": "Revenue", "cellsalign": "right", "cellsformat": "c2" }],  

Now what else do we need? Yes, we need to create a div where we can render our grid.

  1. <body class='default'>  
  2.     <div id='jqxWidget'>  
  3.         <div id="readymessage" style="display:none;padding:25px;">Show/Hide Columns in JQWidgets JQX Grid @Sibeesh Passion!. Enjoy Coding!.</div>  
  4.         <div style="float: left;" id="jqxlistbox"></div>  
  5.         <div style="margin-left: 20px; float: left;" id="jqxgrid"></div>  
  6.     </div>  
  7. </body>  

Here I am creating a new div that is not used for grid rendering.

  1. <div id="readymessage" style="display:none;padding:25px;">Show/Hide Columns in JQWidgets JQX Grid @Sibeesh Passion!. Enjoy Coding!.</div>  

I will introduce a function called ready here. What this function does is, it will be fired once the grid is loaded fully. So we can use this function for the operations that must be executed after the grid rendering.

  1. ready: function () {  
  2.    // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.  
  3.    $('#readymessage').show();  
  4. },  

The data

What about our data? We have not seen our data, right?

  1. [{"AreaCode":"B697-31","Revenue":12747128.190000001},{"AreaCode":"B697-92","Revenue":7922559.1600000048},{"AreaCode":"B697-76","Revenue":7541039.540000001},{"AreaCode":"B697-46","Revenue":7076495.5800000066},{"AreaCode":"B553-131","Revenue":5738816.5099999979},{"AreaCode":"B553-193","Revenue":4608556.52},{"AreaCode":"B697-74","Revenue":3895194.1099999994},{"AreaCode":"D158-233","Revenue":3572808.989999996},{"AreaCode":"B697-78","Revenue":3512657.6999999937},{"AreaCode":"B672-31","Revenue":2955916.9800000032},{"AreaCode":"B553-46","Revenue":2806813.7100000042}]  

All set now. So shall we see the grid now?

Now we will create a list box and when a user clicks on the column name, it will be shown/hidden. Sounds OK?

List Box Implementation

To load the list box we need data, right?

  1. var listSource = [{ label: 'Area Code', value: 'AreaCode', checked: false }, { label: 'Revenue', value: 'Revenue', checked: true }]; 

No we need to bind this data to the list box!

  1. $("#jqxlistbox").jqxListBox({ source: listSource, width: 200, height: 200, checkboxes: true }); 

Run the application and see the output. If everything goes fine, you will see the output as follows.

run program

What next ? We will create a checkChange event of our list box now.

  1. $("#jqxlistbox").on('checkChange', function(event) {  
  2.     $("#jqxgrid").jqxGrid('beginupdate');  
  3.     if (event.args.checked) {  
  4.         $("#jqxgrid").jqxGrid('showcolumn', event.args.value);  
  5.         //alert(event.args.value);  
  6.     } else {  
  7.         $("#jqxgrid").jqxGrid('hidecolumn', event.args.value);  
  8.     }  
  9.     $("#jqxgrid").jqxGrid('endupdate');  
  10. }); 

So once the user clicks, that specific column will be in hidden or shown mode. And we are passing the value from the list box that is the same as the dataField property of the grid, to the grid.

No we will see our complete code.

Complete Code

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <title>Show/Hide Columns in JQWidgets JQX Grid @Sibeesh Passion!. Enjoy Coding!.</title>  
  5.         <script src="jquery-1.9.1.js"></script>  
  6.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxcore.js"></script>  
  7.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.js"></script>  
  8.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxbuttons.js"></script>  
  9.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxscrollbar.js"></script>  
  10.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxlistbox.js"></script>  
  11.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxdropdownlist.js"></script>  
  12.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxmenu.js"></script>  
  13.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.js"></script>  
  14.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.filter.js"></script>  
  15.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.sort.js"></script>  
  16.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.selection.js"></script>  
  17.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.pager.js"></script>  
  18.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsresize.js"></script>  
  19.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.columnsreorder.js"></script>  
  20.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxgrid.export.js"></script>  
  21.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxdata.export.js"></script>  
  22.         <script type="text/javascript" src="JQXItems/jqwidgets/jqxdatatable.js"></script>  
  23.         <link href="JQXItems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />  
  24.         <script type="text/javascript">  
  25. $(document).ready(function() {  
  26.     // prepare the data  
  27.     var source = {  
  28.         datatype: "json",  
  29.         datafields: [{  
  30.             "name": "AreaCode",  
  31.             "type": "string"  
  32.         }, {  
  33.             "name": "Revenue",  
  34.             "type": "number"  
  35.         }],  
  36.         url: "jsonData.txt"  
  37.     };  
  38.     var dataAdapter = new $.jqx.dataAdapter(source);  
  39.     $("#jqxgrid").jqxGrid({  
  40.         width: 600,  
  41.         source: dataAdapter,  
  42.         ready: function() {  
  43.             // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.  
  44.             $('#readymessage').show();  
  45.         },  
  46.         columnsresize: true,  
  47.         columns: [{  
  48.             "text": "Area Code",  
  49.             "dataField": "AreaCode",  
  50.             "cellsalign": "left",  
  51.             "cellsformat": "d",  
  52.             hidden: true  
  53.         }, {  
  54.             "text": "Revenue",  
  55.             "dataField": "Revenue",  
  56.             "cellsalign": "right",  
  57.             "cellsformat": "c2"  
  58.         }],  
  59.         pageable: true,  
  60.         filterable: true,  
  61.         sortable: true  
  62.     });  
  63.     var listSource = [{  
  64.         label: 'Area Code',  
  65.         value: 'AreaCode',  
  66.         checked: false  
  67.     }, {  
  68.         label: 'Revenue',  
  69.         value: 'Revenue',  
  70.         checked: true  
  71.     }];  
  72.     $("#jqxlistbox").jqxListBox({  
  73.         source: listSource,  
  74.         width: 200,  
  75.         height: 200,  
  76.         checkboxes: true  
  77.     });  
  78.     $("#jqxlistbox").on('checkChange', function(event) {  
  79.         $("#jqxgrid").jqxGrid('beginupdate');  
  80.         if (event.args.checked) {  
  81.             $("#jqxgrid").jqxGrid('showcolumn', event.args.value);  
  82.             //alert(event.args.value);  
  83.         } else {  
  84.             $("#jqxgrid").jqxGrid('hidecolumn', event.args.value);  
  85.         }  
  86.         $("#jqxgrid").jqxGrid('endupdate');  
  87.     });  
  88. });  
  89. </script>  
  90.     </head>  
  91.     <body class='default'>  
  92.         <div id='jqxWidget'>  
  93.             <div id="readymessage" style="display: none; padding: 25px;">Show/Hide Columns in JQWidgets JQX Grid @Sibeesh Passion!. Enjoy Coding!.</div>  
  94.             <div style="float: left;" id="jqxlistbox"></div>  
  95.             <div style="margin-left: 20px; float: left;" id="jqxgrid"></div>  
  96.         </div>  
  97.     </body>  
  98. </html> 

Output

output

Things to remember

Be sure that your data type is JSON in the source object.

  1. datatype: "json" 

Be sure your JSON is valid.

Conclusion

I hope you like this article. Please share with me your valuable thoughts and comments. Your feedback is always welcomed.

Thanks in advance. Happy coding!

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