How do you change the column header text in Javascript

9 posts, 0 answers
  1. Richard
    Richard avatar
    6 posts
    Member since:
    Jan 2013

    Posted 07 Feb 2013 Link to this post

    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.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 11 Feb 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Richard
    Richard avatar
    6 posts
    Member since:
    Jan 2013

    Posted 11 Feb 2013 Link to this post

    Thanks Vladimir.
  5. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 19 Nov 2013 Link to this post

    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. 
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 21 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Ajay
    Ajay avatar
    1 posts
    Member since:
    Feb 2015

    Posted 13 Feb 2015 in reply to Vladimir Iliev Link to this post

    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 ?     
  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 16 Feb 2015 Link to this post

    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:

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Gaurav
    Gaurav avatar
    3 posts
    Member since:
    Mar 2016

    Posted 10 Aug in reply to Vladimir Iliev Link to this post

    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

  10. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 11 Aug Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready