Tooltips on Column Headings

[AP]

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?

[Tsvetomir]

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

[AP]

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..

 

[Tsvetomir]

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

[AP]

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.

 

 

[Tsvetomir]

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