Sibeesh Passion

Top Menu

  • Home
  • Communities
  • Search
  • About

Main Menu

  • Articles
    • Azure
    • JavaScript
    • Angular
    • Node JS
    • Web API
    • Career Advice
    • Interview
    • JQuery
    • Knockout JS
    • Jasmine Framework
    • Database
    • SQL
    • MongoDB
    • MySQL
    • Tools
    • IIS
    • Wamp Server
    • WordPress
    • Visual Studio
    • ASP.NET
    • MVC
    • PHP
    • SEO
    • HTML5
    • Office Development
  • Controls
    • HighChart
    • High Map
    • Ignite UI
      • igGrid
      • igDataChart
    • JQWidgets
      • JQX Grid
      • JQX List Box
    • Spire.Doc
    • Spire.XLS
  • My Contributions
    • Medium
    • ASP.NET Forum
    • C# Corner
    • Code Project
    • DZone
    • GitHub
    • JSFiddle
    • MSDN
    • Stack Overflow
  • Connect with Me
    • About Me
    • Facebook
    • Google Plus
    • Linkedin
    • Pinterest
    • Twitter
    • Quora
    • YouTube
  • Videos
  • Awards
  • SibeeshVenu.com
  • Home
  • Communities
  • Search
  • About

logo

Sibeesh Passion

  • Articles
    • Azure
    • JavaScript
    • Angular
    • Node JS
    • Web API
    • Career Advice
    • Interview
    • JQuery
    • Knockout JS
    • Jasmine Framework
    • Database
    • SQL
    • MongoDB
    • MySQL
    • Tools
    • IIS
    • Wamp Server
    • WordPress
    • Visual Studio
    • ASP.NET
    • MVC
    • PHP
    • SEO
    • HTML5
    • Office Development
  • Controls
    • Ignite_UI_Chart_Control

      Working With IgniteUI Chart igDataChart Control

      July 14, 2016
      0
    • Apply License Key

      Working With IgniteUI Grid Control

      July 10, 2016
      0
    • Grid with check box selection

      Implement radio button selection in JQWidgets JQXGrid using checkbox

      June 29, 2016
      0
    • High Chart

      Client Side Exporting In HighChart

      May 27, 2016
      0
    • Dynamically apply colour coding in Grid

      Dynamically Apply Colour Coding in Grid With Dynamic Headers And Data

      February 16, 2016
      0
    • Dynamically apply colour coding in Grid

      Remove Time Stamp Form Legend In HighChart

      January 25, 2016
      0
    • Select NuGet Package

      Using MVC Grid In MVC

      December 11, 2015
      0
    • Column values to a href

      a href Columns In Grid

      November 11, 2015
      0
    • Load Data On Scroll

      Load Data To Grid On Sroll

      November 2, 2015
      0
    • HighChart
    • High Map
    • Ignite UI
      • igGrid
      • igDataChart
    • JQWidgets
      • JQX Grid
      • JQX List Box
    • Spire.Doc
    • Spire.XLS
  • My Contributions
    • Medium
    • ASP.NET Forum
    • C# Corner
    • Code Project
    • DZone
    • GitHub
    • JSFiddle
    • MSDN
    • Stack Overflow
  • Connect with Me
    • About Me
    • Facebook
    • Google Plus
    • Linkedin
    • Pinterest
    • Twitter
    • Quora
    • YouTube
  • Videos
    • Bing Speech And Translate Text

      Webinar: Let us Build a Speech, Translation API using AZURE Bing Speech ...

      June 30, 2018
      0
    • Text Translator Api Thumbnail

      Video: Azure Cognitive Services Text Translator API

      June 30, 2018
      0
    • Bing Speech Api Thumbnail

      Video: Azure Cognitive Services - Bing Speech API

      June 30, 2018
      0
    • Video: 21 Easy Tips for Healthy Life

      February 22, 2018
      0
    • Azure Face API

      Webinar: Azure Cognitive Service Face API

      July 23, 2017
      0
    • Custom Stylish Handlebar Mirror in Royal Enfield Thunderbird

      June 25, 2017
      0
    • Wrapping Rope in Royal Enfield Crash Guard Or Bumper

      April 22, 2017
      0
    • How to Change Handlebar in Royal Enfield Thunderbird

      April 22, 2017
      0
    • Video: How to be a successful software engineer

      April 22, 2017
      0
  • Awards
  • SibeeshVenu.com
  • Create Your Own Cryptocurrency in Private Consortium Network Ethereum Azure Blockchain

  • Detect Noise Level Audio Decibels in MXChip Azure IoT DevKit

  • Deploy Angular App Using Azure DevOps Build and Release Pipelines

  • MXChip Device with Pressure, Humidity, Temperature Info using Azure IoT Workbench

  • Realtime IoT Data using Azure SignalR and Functions in Angular

ArticleJQWidgetsJQX GridProducts
Home›Article›Change Header Names Dynamically In JQwidgets JQX grid

Change Header Names Dynamically In JQwidgets JQX grid

By SibeeshVenu
October 28, 2015
1642
0
Share:
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, 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: https://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.

Change Header Names Dynamically In JQwidgets JQX grid

Change Header Names Dynamically In JQwidgets JQX grid

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());
            });

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 woks.

Change Header Names Dynamically In JQwidgets JQX grid

Change Header Names Dynamically In JQwidgets JQX grid

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

<!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.

Kindest Regards
Sibeesh Venu

TagsChange Header Names Dynamically In JQwidgets JQX gridjQWidgetJQX GridJQXGridProductssetcolumnproperty JQX Grid
Previous Article

Export MDX Result As Excel

Next Article

Change Themes Dynamically In Grid

0
Shares
  • 0
  • +
  • 0
  • 0
  • 0
  • 0

SibeeshVenu

I'm neither an expert nor a guru. I have been awarded Microsoft MVP 3times, C# Corner MVP 4 times, DZone MVB. I always love to learn new technologies, I believe the one who stops learning is old. You are always welcome to ask any doubts if you have any, I would be more than happy to help. Please feel free to follow me on any social media network, I really like to get connected with you.

Related articles More from author

  • Drag and Drop the Legend and Maintain the Position in Chart
    ArticleHighChartProducts

    Drag and Drop the Legend and Maintain the Position in Chart

    April 29, 2015
    By SibeeshVenu
  • Load Data On Scroll
    ArticleJavaScriptJQueryJQWidgetsJQX GridProducts

    Load Data To Grid On Sroll

    November 2, 2015
    By SibeeshVenu
  • Select NuGet Package
    ArticleASP.NETMVC Grid

    Using MVC Grid In MVC

    December 11, 2015
    By SibeeshVenu
  • Save Zoomed View Of Bubble Map
    ArticleHigh MapJQueryProducts

    How To Save the Zoom View of Our Map

    April 29, 2015
    By SibeeshVenu
  • Working With JQX Grid With Filtering And Sorting And Searching
    ArticleJQWidgetsJQX Grid

    Working With JQX Grid With Filtering And Sorting And Searching

    November 29, 2014
    By SibeeshVenu
  • ArticleJQWidgetsJQX Grid

    Assigning Data Source Batch By Batch in JQWidgets JQX Grid

    December 29, 2014
    By SibeeshVenu

Leave a reply Cancel reply

0

MICROSOFT MVP (3)

profile for Sibeesh Venu - Microsoft MVP

Recent Posts

  • Create Your Own Cryptocurrency in Private Consortium Network Ethereum Azure Blockchain
  • Detect Noise Level Audio Decibels in MXChip Azure IoT DevKit
  • Deploy Angular App Using Azure DevOps Build and Release Pipelines
  • MXChip Device with Pressure, Humidity, Temperature Info using Azure IoT Workbench
  • Realtime IoT Data using Azure SignalR and Functions in Angular
  • IoTHubTrigger Azure Function and Azure IoT Hub
  • Azure Function as Output Job Topology of an Azure Stream Analytics Job
  • Azure Stream Analytics Job and Tools for Visual Studio
  • An Introduction to Azure Stream Analytics Job
  • Raspberry PI SD Card Provisioning with Windows 10 IoT Core – Adding Packages to the Existing FFU Image

Archives

  • January 2019 (4)
  • December 2018 (6)
  • November 2018 (8)
  • October 2018 (5)
  • July 2018 (4)
  • June 2018 (4)
  • May 2018 (2)
  • April 2018 (3)
  • March 2018 (4)
  • February 2018 (4)
  • January 2018 (1)
  • December 2017 (3)
  • November 2017 (3)
  • October 2017 (1)
  • September 2017 (2)
  • July 2017 (3)
  • June 2017 (3)
  • May 2017 (7)
  • April 2017 (9)
  • March 2017 (9)
  • February 2017 (2)
  • January 2017 (4)
  • December 2016 (2)
  • November 2016 (2)
  • October 2016 (1)
  • August 2016 (1)
  • July 2016 (7)
  • June 2016 (9)
  • May 2016 (11)
  • April 2016 (6)
  • March 2016 (14)
  • February 2016 (15)
  • January 2016 (11)
  • December 2015 (8)
  • November 2015 (16)
  • October 2015 (22)
  • September 2015 (11)
  • August 2015 (20)
  • July 2015 (27)
  • June 2015 (35)
  • May 2015 (51)
  • April 2015 (10)
  • March 2015 (9)
  • January 2015 (17)
  • December 2014 (5)
  • November 2014 (2)
  • October 2014 (3)
  • August 2014 (1)
  • July 2014 (1)
  • December 2013 (1)

Categories

  • Achievements (34)
    • Microsoft MVP (1)
  • ADO.NET (1)
  • Android (1)
  • Angular (26)
  • Arduino (2)
  • Article (255)
  • Article Of The Day (3)
  • ASP.NET (35)
  • Asp.Net Core (2)
  • Automobile (5)
  • Awards (8)
  • Azure (34)
    • Azure CDN (1)
    • Cognitive Services (3)
      • Translator Text (1)
    • Virtual Machine (4)
  • Blockchain (1)
  • Blog (14)
  • Browser (1)
  • C-Sharp Corner (17)
    • Monthly Winners (1)
      • October 2015 (1)
  • C# (19)
  • Career Advice (10)
  • Code Snippets (53)
  • CodeProject (31)
  • CSS (6)
  • CSS3 (5)
  • Database (36)
    • MongoDB (5)
    • MySQL (3)
    • SQL (28)
      • SSAS (2)
    • SQL Server (11)
  • Docker (2)
  • Drawings (1)
  • Excel Programming (3)
  • Fun (1)
  • How to (35)
  • HTML (5)
  • HTML5 (18)
    • Storage In HTML5 (2)
  • IIS (3)
  • Interview (6)
  • IoT (11)
  • JavaScript (15)
  • JQuery (77)
    • Exporting (1)
    • jQuery UI (1)
  • Json (7)
  • Knockout JS (2)
  • Linux (1)
  • Machine Learning (1)
  • Microsoft (8)
    • Microsoft Windows Server (1)
    • Outlook (2)
    • Skype (1)
    • Web Platform Installer (1)
    • WebMatrix (1)
  • Microsoft ADOMD (7)
    • MDX Query (3)
  • Microsoft Office (7)
  • Microsoft Technologies (7)
    • Office Development (5)
  • Microsoft Windows (9)
    • Windows 10 (5)
    • Windows 7 (1)
    • Windows 8.1 (2)
  • Mobile (2)
  • Mobile Brands (1)
    • One Plus (1)
  • MVC (6)
  • News (12)
  • Node JS (5)
  • npm (1)
  • Number Conversions (1)
  • Page (1)
  • PHP (3)
  • Poems (1)
    • Malayalam Poems (1)
  • Products (36)
    • High Map (2)
    • HighChart (8)
      • Drill Down Chart (1)
    • Ignite UI (2)
    • JQWidgets (19)
      • JQX Grid (18)
    • MVC Grid (1)
    • Spire.Doc (1)
    • Spire.PDF (1)
    • Spire.XLS (2)
  • Q&A (7)
  • Raspberry PI (5)
  • React (2)
  • SEO (2)
  • SharePoint (2)
  • Social Media (1)
    • Facebook (1)
  • Software (1)
    • Third Party Software Apps (1)
  • Stories (6)
    • English (2)
    • Malayalam (3)
  • Tips (2)
  • Tools (19)
    • GitHub (1)
    • SSMS (1)
    • Visual Studio (12)
      • Visual Studio 2017 (8)
  • Uncategorized (1)
  • Unit Testing (2)
  • VB.Net (1)
  • Videos (17)
  • Wamp Server (3)
  • Web API (12)
  • Webinars (1)
  • Wordpress (9)

ABOUT ME

I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.  If you would like to know more about me, you can read my story here.

Follow me

CONTACT ME

  • X 384 / A, Katrikkal House, Vembilly Post, Kunnathunadu Panchayat, Ernakulam - 683565, Kerala, India
  • 08893 08893 2
  • info@sibeeshpassion.com

Optin Form

Tags

Achievements ADOMD Angular Angular 5 Angular JS article Article Of The Day Asp.Net Azure Azure IoT C# c-sharp corner Career Advice chart CSharp CSS CSS3 HighChart How To HTML5 HTML5 Chart Interview IoT IoT Hub Javascript JQuery jquery functions JQWidgets JQX Grid Json Microsoft MVC MVP MXChip News Products SQL SQL Server Visual Studio Visual Studio 2017 VS2017 Web API Windows Windows 10 Wordpress
  • Home
  • About
  • Communities
  • Search
© Copyright Sibeesh Passion 2018-2019. All Rights Reserved.