How do you change the column header text in Javascript

[Richard]

I want to be able to dynamically set the column headers. The title attribute of the columns is not sufficient, see below:
 columns: [
            { field: "CustomerNumber", title: "Customer Number", attributes: { style: "white-space: nowrap" } },
            { field: "CustomerName", title: "Customer", attributes: { style: "white-space: nowrap" } },
            { field: "InvitationEmail", title: "Email", template: "<a href=\"mailto:#=InvitationEmail#\">#=InvitationEmail#</a>", attributes: { style: "white-space: nowrap" }},
        ]

How do I set the title dynamically? These values typically come from the resource file.

[Vladimir Iliev]

Hi Richard,

 
Basically you can set the column title dynamically using jQuery to find the current column header and replace it's text. Please check the example below for CustomerNumber column:

//replace "grid" with your grid id
$("#grid thead [data-field=CustomerNumber] .k-link").html("NewTitle")

Kind Regards,
Vladimir Iliev
the Telerik team

[Richard]

Thanks Vladimir.

[Kjell]

Is this solution still current?  It is not working for me.  I am trying to change the header text for the "Month" column. 

$("#trendHoursGrid").kendoGrid({
                    groupable: false,
                    dataSource: gridStats_dataSource,
                    columns: [ {
                                field: "Month",
                                width: 190,
                                title: "Month"
                            } , {
                                field: "Actual",
                                title: "Actual"
                            } , {
                                field: "Budget",
                                title: "Budget"
                            } , {
                                field: "Variance",
                                title: "Variance"
                            } , {
                                field: "Target",
                                title: "% of Target"
                            }
                        ]
                });

This has no effect:

$("#trendHoursGrid thead [data-field=Month] .k-link").html("NewTitle")

I've also tried several variations, not sure what I am missing, please help.  Thanks!

On a whim I just tried removing the initial title definition but it just defaults to the field name and then does not change. 

[Vladimir Iliev]

Hi Kjell,

With current configuration you should use the following approach (as the header is not clickable in current case):

$("#trendHoursGrid th[data-field=Month]").html("NewTitle")

Regards,
Vladimir Iliev
Telerik

[Ajay]

Hi

  I'm using below pseudo code   var x= ('#grid').datasource(data);   //Getting the data.
var y = x.columns for getting the columns
var Title = y[0].title.,
 var Title1=y[1]
when I try to replace title  and tile 1 with grid column it replaces only first column value in grid  but 2nd remains same.
Please suggest ?     

[Vladimir Iliev]

Hello Ajay,

From the provided information it seems that for the second column you are not accessing the "title" field of the column which is the reason for current behavior. For convenience I created small example which shows two different approaches of updating given column:

• http://dojo.telerik.com/UrIkU/4

Regards,
Vladimir Iliev
Telerik

 

 

[Gaurav]

How can short and long name be set based on resize of the column? I am using angular. I dont want to use jquery to manipulate the DOM.

Any pointers?

 

Thanks,

Gaurav

[Vladimir Iliev]

Hi Gaurav,

Possible solution is to use the "columnResize" event to either manually modify the title element content or get current Grid options ("getOptions"), modify the column title and set them back ("setOptions").
 
Regards,
Vladimir Iliev
Telerik by Progress

 

 

[Shubhankar]

Can we change the column header text by not loosing the filter button on its right. Currently, as I change the text of the header I am loosing on the filter button next to it and thus not able to filter that particular column. I have changed the column header to "Month" dynamically in the below image.

Thanks,

Shubhankar

[Georgi Denchev]

Hi, Shubhankar,

You can target the ".k-link" element instead of replacing the html of the entire header element.

Dojo example:

https://dojo.telerik.com/@gdenchev/afUKuWiz