This is a migrated thread and some comments may be shown as answers.

Get Column Header Title

19 Answers 1724 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 07 Oct 2014, 08:42 PM
Trying to figure out how to get the column name in order to do my foreach loop in code in order to change the column header.
This is what I want to happen at the end where day is the name of the column and date is a date passed to the method. 
$("grid thead [data-field=dailyhours; .k-link")html(day + '</br>" + date);]

19 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 09 Oct 2014, 06:41 AM
Hi Richard,


Indeed the data-field attribute could be used to retrieve the appropriate column header, as it points to the property name that it is bound to. Regarding the change of the inner html, I would suggest to inspect the column header with your browsers developer tools, as it may be different depending on whether the Grid is filterable, sortable, with column menu etc.

I hope this information helps. Have a great day!

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 14 Oct 2014, 01:18 PM
That did not answer my question.  I know the data element will work just don't know how to get it to work? 
0
Dimiter Madjarov
Telerik team
answered on 15 Oct 2014, 08:04 AM
Hello Richard,


Here is a sample approach to retrieve the column header and set a new title.
E.g.
$("#grid thead").find("[data-field='ContactTitle'] .k-link").html("My new <br/> header");

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 15 Oct 2014, 01:46 PM
Ahhh....ok, so if I have a condition like
if(colvalues[t].title === day)
$("#grid thead").find("data-field='dailyhours' + day].k-link").html(day + '</br>' + date);

I need to change the value of the datafield based on the day since each datafield has a different name.  ex. dailyhoursSun or dailyhoursMon etc. 
0
Dimiter Madjarov
Telerik team
answered on 16 Oct 2014, 07:24 AM
Hi Richard,


The code is correct. You should only add a space before the .k-link selector, as the link is a nested element.

Let me know if you experience any further difficulties.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 16 Oct 2014, 02:23 PM
I got unrecognized expression: [data-field='dailyhours' + day] .klink 
day is a value like Sun or Mon etc...
0
Dimiter Madjarov
Telerik team
answered on 20 Oct 2014, 07:10 AM
Hi Richard,


You could append the value to the data-field string.
E.g.
$("#grid thead").find("[data-field='dailyhours" + day + "'] .k-link")

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 23 Oct 2014, 08:40 PM
Thats not quite what I needed.  If I append to the data-field then it would be some number and a day.  I need the column header to give me the ability to append to the Title not the data-field where input  occurs in the grid.
0
Dimiter Madjarov
Telerik team
answered on 24 Oct 2014, 10:19 AM
Hello Richard,


It is not clear what Kendo UI related issues are you experiencing. In the above posts I discussed how to access the column headers DOM elements and manipulate the markup, which was the initial question. Let me know if that's not the case.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 27 Oct 2014, 02:30 PM
I want to access the actual column header itself.  If the code you gave me is correct.  Its not recognizing it.  To me it looks like were finding the dataelement called dailyhours and then appending a date to it.  So what would be displayed is "100 Sat". 
0
Dimiter Madjarov
Telerik team
answered on 27 Oct 2014, 03:12 PM
Hi Richard,


Here is a runnable example, which demonstrates that approach is correct. If the problem is still persisting on your end, please edit the example in order to reproduce it and send it back to me, so I could provide further assistance.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 27 Oct 2014, 03:26 PM
Thanks, Having issue its not loading the snippet. 
0
Dimiter Madjarov
Telerik team
answered on 27 Oct 2014, 04:01 PM
Hi Richard,


The snippet is loading correctly on my side in Chrome, Firefox and IE 11. For convenience I also copied it here.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 27 Oct 2014, 04:22 PM
IT WORKED!!  Thank YOU!!  I had to use jsbin link you provided not sure why it would not pull it up on the web.  Now just gotta fix the dropdownlist.  :)
0
Dimiter Madjarov
Telerik team
answered on 27 Oct 2014, 05:04 PM
Hello Richard,


Thanks for the update. I am glad the issue is resolved.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 04 Dec 2014, 06:10 PM
Got the code to work in the test project you provided but...in my code I use a swtich statement and I tested it by returning just one item but it overwrote the data in the column but did change the header.   How can I return my switch statement without overwritting the values in the cells for that column?  Its showing undefined.
0
Dimiter Madjarov
Telerik team
answered on 05 Dec 2014, 02:55 PM
Hello Richard,


If you would like to access the .k-link element, there should be a space inside the jQuery selector as it is nested inside the header.
E.g.
$("#grid thead").find("[data-field='dailyhoursSun2'] .k-link").html("...");

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Richard
Top achievements
Rank 1
answered on 05 Dec 2014, 03:16 PM
One of my problems is in my jquery script it does not return the change.  I hardcoded a return just to see if it even worked on one element and it did but set the column data to undefined.  So somehow my switch statement is not returned. I have it included in the code snippet. 
0
Dimiter Madjarov
Telerik team
answered on 05 Dec 2014, 04:11 PM
Hello Richard,


I could not state why the switch statement is not returning the correct new value. This is a custom logic, which I am unable to debug from the provided file. If you could send us an isolated runnable example, which demonstrates the issue, I could inspect it locally and determine the reason for the problem.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Richard
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Richard
Top achievements
Rank 1
Share this question
or