We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change a headertext of a grid

Thread ID:





129529 Mar 23,2017 04:59 PM UTC Mar 29,2017 05:17 AM UTC JavaScript 3
Tags: ejGrid
Roimer Machacón Otero
Asked On March 23, 2017 04:59 PM UTC

Hi, we're using syncfusion grid, now depending of a external value we're need change the header text of the grid.

Example: We manage Ton and Kg, this value is saved in a variable. Now have a column Weight and depending of the value in the variable we want add Ton or Kg for show of this form:

Weight (Ton) ---- or ---- Weight (Kg)

Exist a form for make this having a instance of the grid?

Venkatesh Ayothi Raman [Syncfusion]
Replied On March 24, 2017 10:12 AM UTC

Hi Roimer, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and based on your requirement we have prepared a sample that can be available from the below link. 
In this sample we have changed the headerText based on the value given in the textBox. To change the headerText initially we have used load event in grid. After changing the value in the text box then clicking the button we have called updateHeader method. In the updateHeader method we have change the headerText for the columns in grid. 
Please refer the below code example. 
<input id="measurement" value="Ton" /> <button id="btn">Change HeaderText</button> 
        <div id="Grid"></div> 
      <script type="text/javascript"> 
        $(function () { 
            var element = $("#Grid"); 
                dataSource: window.gridData, 
                allowPaging: true, 
                load: "load", 
                columns: [ 
                             { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 90 }, 
                             { field: "EmployeeID", width: 90 } 
            $("#btn").bind("click", function (args) { 
                var grid = $("#Grid").ejGrid("instance"); 
                grid.refreshHeader(); // Refresh the header alone 
        function load(args) { 
        function updateHeader() { 
            var measurementValue = $("#measurement").val(); 
            var grid = $("#Grid").ejGrid("instance"); 
            var index = grid.getColumnIndexByField("EmployeeID"); 
            grid.model.columns[index].headerText = "Weight(" + measurementValue + ")"; 

Refer the documentation link:  

Please let us know if you need further assistance. 

Venkatesh A. 

Roimer Machacón Otero
Replied On March 28, 2017 06:36 PM UTC

Thanks you, this work correctly!

Mani Sankar Durai [Syncfusion]
Replied On March 29, 2017 05:17 AM UTC

Hi Roimer 

We are happy to hear that your problem has been solved. 

Please let us know if you need further assistance 
Manisankar Durai. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon