Products

Change Header Names Dynamically In JQwidgets JQX Grid

In this post we will see how we can change header names dynamically In JQwidgets JQX grid. I recently came across a situation to change the grid’s header columns text should be changed dynamically, whenever user change a text box content. So I have done this requirement by using some in-built functionalities of jQWidget JQX grid. Here I am going to share 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>Change Header Names Dynamically In JQwidgets 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. {  
  28.     // prepare the data  
  29.     var data = {  
  30.         datatype: "json",  
  31.         datafields: [  
  32.         {  
  33.             "name": "AreaCode",  
  34.             "type": "string"  
  35.         },  
  36.         {  
  37.             "name": "Revenue",  
  38.             "type": "number"  
  39.         }],  
  40.         //id: 'id',  
  41.         url: "jsonData.txt"  
  42.     };  
  43.     $("#jqxgrid").jqxGrid(  
  44.     {  
  45.         source: data,  
  46.         columns: [  
  47.         {  
  48.             "text": "Area Code",  
  49.             "dataField": "AreaCode",  
  50.             "cellsalign": "left",  
  51.             "cellsformat": "d"  
  52.         },  
  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. });  
  64.     </script>  
  65. </head>  
  66.   
  67. <body class='default'>  
  68.     <h2>Change Header Names Dynamically In JQwidgets JQX grid - Sibeesh Passion</h2>  
  69.     <div id="jqxgrid"></div>  
  70. </body>  
  71.   
  72. </html>  
Now let us make sure that grid is working fine. Please run your project.

grid

Cool, so grid loaded. Now need to add a select control in which we are going to load the grid header names so that user can select which header must be changed, and a text box where a user can enter the text to be changed for the selected header. Is that fine?
  1. <select id="selectOptions"></select>  
  2. <input type="text" id="changeName" />  
The next thing is we need to add the options to the select control. Right? We can get the column properties of JQX Grid as $(“#jqxgrid”).jqxGrid(‘columns’).records. Now we will create a ready function in the grid settings and append the values. The following is the code for that.
  1. ready: function ()  
  2. {  
  3.     var options = "<option value='0'>--Select Header--</option>";  
  4.     var headerNames = $("#jqxgrid").jqxGrid('columns').records;  
  5.     for (var i = 0; i < headerNames.length; i++)  
  6.     {  
  7.         options += "<option value = '" + headerNames[i].datafield + "'>" + headerNames[i].text + " </option>";  
  8.     }  
  9.     $("#selectOptions").html(options);  
  10. }  
What is next? Yeah, we need to fire the text box change event.
  1. $("#changeName").change(function (e) {  
  2.    $("#jqxgrid").jqxGrid('setcolumnproperty', $('#selectOptions option:selected').val(), 'text', $('#changeName').val());  
  3. });  
In the text box change event we have written the code to change the header column text property.

Here we are using setcolumnproperty method that is already available in the JQWidget library.

Now it is time to see how it works.

result
You can see that the header column text has been changed from ‘Area Code’ to ‘New Area Code’. That’s all we have done it.

Complete Code
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <title>Change Header Names Dynamically In JQwidgets 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. {  
  28.     // prepare the data  
  29.     var data = {  
  30.         datatype: "json",  
  31.         datafields: [  
  32.         {  
  33.             "name": "AreaCode",  
  34.             "type": "string"  
  35.         },  
  36.         {  
  37.             "name": "Revenue",  
  38.             "type": "number"  
  39.         }],  
  40.         //id: 'id',  
  41.         url: "jsonData.txt"  
  42.     };  
  43.     $("#jqxgrid").jqxGrid(  
  44.     {  
  45.         source: data,  
  46.         columns: [  
  47.         {  
  48.             "text": "Area Code",  
  49.             "dataField": "AreaCode",  
  50.             "cellsalign": "left",  
  51.             "cellsformat": "d"  
  52.         },  
  53.         {  
  54.             "text": "Revenue",  
  55.             "dataField": "Revenue",  
  56.             "cellsalign": "right",  
  57.             "cellsformat": "c2"  
  58.         }],  
  59.         pageable: true,  
  60.         filterable: true,  
  61.         sortable: true,  
  62.         ready: function ()  
  63.         {  
  64.             var options = "<option value='0'>--Select Header--</option>";  
  65.             var headerNames = $("#jqxgrid").jqxGrid('columns').records;  
  66.             for (var i = 0; i < headerNames.length; i++)  
  67.             {  
  68.                 options += "<option value = '" + headerNames[i].datafield + "'>" + headerNames[i].text + " </option>";  
  69.             }  
  70.             $("#selectOptions").html(options);  
  71.         }  
  72.     });  
  73.     $("#changeName").change(function (e)  
  74.     {  
  75.         $("#jqxgrid").jqxGrid('setcolumnproperty', $('#selectOptions option:selected').val(), 'text', $('#changeName').val());  
  76.     });  
  77. });  
  78.     </script>  
  79. </head>  
  80.   
  81. <body class='default'>  
  82.     <h3>Change Header Names Dynamically In JQwidgets JQX grid - Sibeesh Passion</h3>  
  83.     <br />  
  84.     <div id="jqxgrid"></div>  
  85.     <br />  
  86.     <br />  
  87.     <select id="selectOptions"></select>  
  88.     <input type="text" id="changeName" /> </body>  
  89.   
  90. </html>  
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 question, then please mention it in the comments section.

Read this article in my blog here.

 

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