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

Using an image instead of text in title?

6 Answers 454 Views
Grid
This is a migrated thread and some comments may be shown as answers.
dccxz
Top achievements
Rank 1
dccxz asked on 16 Mar 2012, 02:36 PM
Hello,
How do I go about inserting an image into a column header instead of text in the Grid?

Also, if row templates are used - is it possible to maintain alternate row highlight? As soon as I start using templates - there is no alternate row highlighting any longer
Thanks, I appreciate any help!

6 Answers, 1 is accepted

Sort by
0
dccxz
Top achievements
Rank 1
answered on 19 Mar 2012, 01:21 PM
Hello,
Do I really need to create a ticket to get this answered? :)
0
Alexander Valchev
Telerik team
answered on 19 Mar 2012, 04:09 PM
Hello Ivan,

The forums are a community resource - we monitor them, but we do not guarantee a timely reply here. If you need a quick answer, it is best to use the support ticketing system - it assigns a response time to all your tickets (based on the license) and automatically forwards the ticket to the team that works on the corresponding product.

As for your questions, inserting images in column header is not supported out of the box. A possible workaround would be to modify the HTML mark up of the corresponding elements via jQuery. For example:
var header = $("#grid .k-grid-header thead");
header
    //finds the corresponding field based on grid field titles
    .find("[data-field='FirstName'] a.k-link")
        //modifies inner HTML
        .html("<img src='person.png' alt='img'/>");

Concerning your second question - I suggest to define an altRowTemplate, which will allow you to modify the appearance of the alternate rows. Here is the syntax:
//defines rowTemplate
rowTemplate: kendo.template($("#template").html()),
//defines altRowTemplate
altRowTemplate: kendo.template($("#altTemplate").html())


I hope this information helps. For convenience I am attaching a sample page that uses the described approaches in action.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
dccxz
Top achievements
Rank 1
answered on 19 Mar 2012, 08:45 PM
Thank you very much Alexander.

I hope the images in the header can be added in future releases.
0
Alexander Valchev
Telerik team
answered on 21 Mar 2012, 09:33 AM
Hi Ivan,

The implementation of a column header template option is not planned for the next official release. My suggestion is to add this as feature request in the user voice forum. If it turns out to be popular, we will include this improvement in our schedule.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Avi
Top achievements
Rank 1
answered on 18 Mar 2014, 07:36 PM
Any news about this one after two years?
0
Alexander Valchev
Telerik team
answered on 19 Mar 2014, 08:20 AM
Hi Avi,

The Grid has a column headerTemplate now. Please see the corresponding documentation:

Regards,
Alexander Valchev
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
dccxz
Top achievements
Rank 1
Answers by
dccxz
Top achievements
Rank 1
Alexander Valchev
Telerik team
Avi
Top achievements
Rank 1
Share this question
or