DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Full-Stack Observability Essentials: Explore the fundamentals of system-wide observability and key components of the OpenTelemetry standard.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Low Code vs. Traditional Development: A Comprehensive Comparison
  • Better Scaffolding with jQuery - Part I
  • How To Use JMS ActiveMQ With Mule 4 - Part 6
  • Configuring Anypoint Platform as an Azure AD Service Provider SSO

Trending

  • Demystifying Enterprise Integration Patterns: Bridging the Gap Between Systems
  • Automated Testing Lifecycle
  • Selecting the Right Automated Tests
  • Automated Testing: The Missing Piece of Your CI/CD Puzzle
  1. DZone
  2. Culture and Methodologies
  3. Agile
  4. Change Header Names Dynamically in JQwidgets JQX Grid

Change Header Names Dynamically in JQwidgets JQX Grid

A tutorial for dynamically changing header names in JQwidgets JQX grid.

Sibeesh Venu user avatar by
Sibeesh Venu
·
Oct. 29, 15 · Tutorial
Like (5)
Save
Tweet
Share
8.74K Views

Join the DZone community and get the full member experience.

Join For Free

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, when ever 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 you that. i hope you will like it.

to load a grid from a json, you can follows 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: http://sibeeshpassion.com/category/jqwidgets/

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:


<!doctype html>
<html lang="en">
<head>
    <title>change header names dynamically in jqwidgets jqx grid - sibeesh passion</title>
    <script src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxdatatable.js"></script>
    <link href="jqxitems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data =
            {
                datatype: "json",
                datafields: [{ "name": "areacode", "type": "string" }, { "name": "revenue", "type": "number" }],
                //id: 'id',
                url: "jsondata.txt"
            };
            $("#jqxgrid").jqxgrid(
                  {
                      source: data,
                      columns: [{ "text": "area code", "datafield": "areacode", "cellsalign": "left", "cellsformat": "d" }, { "text": "revenue", "datafield": "revenue", "cellsalign": "right", "cellsformat": "c2" }],
                      pageable: true,
                      filterable: true,
                      sortable: true
                  });
        });
    </script>
</head>
<body class='default'>
    <h2>change header names dynamically in jqwidgets jqx grid - sibeesh passion</h2>
    <div id="jqxgrid"></div>
</body>
</html>

now let us make sure that grid is working fine. please run your project.

image title

cool, so grid is 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 one’s 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?

  <select id="selectoptions"></select>
    <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. following is the code for that:

 ready: function () {
                          var options = "<option value='0'>--select header--</option>";
                          var headernames = $("#jqxgrid").jqxgrid('columns').records;
                          for (var i = 0; i < headernames.length; i++) {
                              options += "<option value = '" + headernames[i].datafield + "'>" + headernames[i].text + " </option>";
                          }
                          $("#selectoptions").html(options);
                      }

what is next? yeah, we need to fire the text box change event.

$("#changename").change(function (e) {
                $("#jqxgrid").jqxgrid('setcolumnproperty', $('#selectoptions option:selected').val(), 'text', $('#changename').val());
            });

you can see that the header column text has been changed from ‘area code’ to ‘new area code’.

in the text box change event we have written the code to change the header column text property.

here we are using setcolumnproperty method which already available in the jqwidget library.

now it is time to see how it works.

image title

that’s all we have done it.

complete code


<!doctype html>
<html lang="en">
<head>
    <title>change header names dynamically in jqwidgets jqx grid - sibeesh passion</title>
    <script src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.columnsreorder.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="jqxitems/jqwidgets/jqxdatatable.js"></script>
    <link href="jqxitems/jqwidgets/styles/jqx.base.css" rel="stylesheet" />

    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data =
            {
                datatype: "json",
                datafields: [{ "name": "areacode", "type": "string" }, { "name": "revenue", "type": "number" }],
                //id: 'id',
                url: "jsondata.txt"
            };
            $("#jqxgrid").jqxgrid(
                  {
                      source: data,
                      columns: [{ "text": "area code", "datafield": "areacode", "cellsalign": "left", "cellsformat": "d" }, { "text": "revenue", "datafield": "revenue", "cellsalign": "right", "cellsformat": "c2" }],
                      pageable: true,
                      filterable: true,
                      sortable: true,
                      ready: function () {
                          var options = "<option value='0'>--select header--</option>";
                          var headernames = $("#jqxgrid").jqxgrid('columns').records;
                          for (var i = 0; i < headernames.length; i++) {
                              options += "<option value = '" + headernames[i].datafield + "'>" + headernames[i].text + " </option>";
                          }
                          $("#selectoptions").html(options);
                      }
                  });
            $("#changename").change(function (e) {
                $("#jqxgrid").jqxgrid('setcolumnproperty', $('#selectoptions option:selected').val(), 'text', $('#changename').val());
            });
        });
    </script>
</head>
<body class='default'>
    <h3>change header names dynamically in jqwidgets jqx grid - sibeesh passion</h3>
    <br />
    <div id="jqxgrid"></div>
    <br />
    <br />
    <select id="selectoptions"></select>
    <input type="text" id="changename" />
</body>
</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?

a blog isn’t a blog without comments, but do try to stay on topic. if you have a question unrelated to this post, you’re better off posting it on c# corner, code project, stack overflow, asp.net forum instead of commenting here. tweet or email me a link to your question there and i’ll definitely try to help if i can.

code style Column (database) POST (HTTP) Requirement Property (programming) Event Blog Overflow (software) Links

Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Low Code vs. Traditional Development: A Comprehensive Comparison
  • Better Scaffolding with jQuery - Part I
  • How To Use JMS ActiveMQ With Mule 4 - Part 6
  • Configuring Anypoint Platform as an Azure AD Service Provider SSO

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: