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

Tooltips on Column Headings

5 Answers 1320 Views
Grid
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 01 Mar 2019, 03:36 PM

I have a grid, with several columns with headings that are much too long to display.  I have overcome this, by using a header template, with a bootstrap tooltip on it.
This works fine, however, if the column is made filterable, the filter icon is displayed in the wrong place, and is also the wrong colour.

col.Bound(o => o.Referral24HrsMedFit).ClientTemplate("#=Referral24HrsMedFit_Glyph#").HeaderTemplate("<span data-toggle='tooltip' data-placement='top' title='Referral to all agencies within 24hrs of being medically fit'>Ref..</span>");


Is there any way to prevent this?

5 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 05 Mar 2019, 02:27 PM
Hello,

The HeaderTemplate configuration of a certain column overrides the default configuration. Generally, the developer would have to handle all of the items that are within the header. With that said, if there are a few titles which are longer than the space of the header, you would have to create several tooltips and all icons would have to be handled. 

What I suggest is to leave the grid to wrap the text and position the icons. And create one Kendo UI Tooltip and change its content dynamically. Here is a plausible approach on how to implement the tooltip:

$(document).ready(function() {
         grid.thead.kendoTooltip({
            filter: "th",
            content: function (e) {
                var target = $(e.target)
                 return target[0].dataset.title;
            }
          }) 
});

Try the suggestion above a try and let me know if you encounter any issues.


Best regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 05 Mar 2019, 03:25 PM

Thanks for the response - but wouldn't your solution leave the full title showing in the grid?

That's what I need to avoid, as the field itself just contains a true / false icon, but the heading is very long, so I'm only showing the first three letters. The tooltip then allows the full title to be seen when needed..

 

0
Tsvetomir
Telerik team
answered on 07 Mar 2019, 03:06 PM
Hello,

The Kendo UI Grid header cell's text is wrapped by default. The suggested approach from my previous response would not affect the default appearance of the grid, it would be affected only when external CSS styles are applied. For instance, when using a Kendo UI Tooltip the outcome would be something similar to this:



For your reference, I have created and attached a sample project in which this behavior can be seen in action. Give it a try and let me know if there is anything else I can help with.


Best regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 08 Mar 2019, 01:16 PM

Thanks for this. The tooltips work, but my grid just shows the whole title, whether I set the grid width, or even the column width.

I've attached a picture.

 

 

0
Tsvetomir
Telerik team
answered on 12 Mar 2019, 12:03 PM
Hi Andrew,

When the titles of the grid's column are longer than the provided space, they automatically get wrapped. Based on the screenshot, I assume that there might be styles which interfere with the default ones. For example, a column header getting outside of the boundaries is not expected behavior. If you change the position of the column to be any other except the last one, is there any difference? It is still shown as-is?

Indeed, I have tested the sample provided in my last response and the appearance of the grid is as follows:

https://www.screencast.com/t/MKopmnmMKN

I am attaching the project of interest to my reply, can you modify it in order to reproduce the faulty behavior and send it back to me? 
 

Regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Tsvetomir
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or