How to display a HeaderTooltip when AllowColumnsReorder is set to true, and AllowSorting is set to false for the specific column?

[Missing User]

I created this little prototype to illustrate the problem I'm having.

Basically, the 'UnitsInStock' column is not displaying the tooltip.

Notice that if you set AllowSorting=True for the column or set AllowColumnsReorder=False in ClientSettings, then the tooltip will work.

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="HowToDisplayHdrTooltipsInTelerikRadgrid._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager runat="server" />
    <telerik:RadGrid ID="grid" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowSorting="true"
        GridLines="None">
        <ClientSettings AllowColumnsReorder="True">
        </ClientSettings>
        <MasterTableView DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
            <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
            <Columns>
                <telerik:GridBoundColumn DataField="ProductID" DataType="System.Int32" HeaderText="ProductID"
                    ReadOnly="True" AllowSorting="true" SortExpression="ProductID" UniqueName="ProductID" HeaderTooltip="product id tooltip">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName" AllowSorting="true" SortExpression="ProductName"
                    UniqueName="ProductName" HeaderTooltip="product name tooltip">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName"
                    UniqueName="CategoryName" HeaderTooltip="category name tooltip">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="UnitPrice" DataType="System.Decimal" HeaderText="UnitPrice"
                    SortExpression="UnitPrice" UniqueName="UnitPrice" HeaderTooltip="unit price tooltip">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="UnitsInStock" DataType="System.Int16" HeaderText="UnitsInStock" AllowSorting="false"
                    UniqueName="UnitsInStock" HeaderTooltip="units in stock tooltip">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [ProductID], [ProductName], [CategoryName], [UnitPrice], [UnitsInStock] FROM [Alphabetical list of products]">
    </asp:SqlDataSource>
</asp:Content>

PS - I'm using version 2010.2.929.40

[Eyup]

Hello John,

The observed behavior is expected since the dragging tooltip has a higher "priority" than the regular one, and the sorting tooltip has higher priority than both of them. In order to show the custom declared tooltips of the columns, please try the following approach:
   mark-up:

<ClientSettings ... >
            <ClientEvents OnColumnMouseOver="columnHeaderHovered" />
 </ClientSettings>

   javascript:

function columnHeaderHovered(sender, args) {
   sender.ClientSettings.ClientMessages.DragToGroupOrReorder = args.get_gridColumn().get_element().title;
 }

That should do the trick.

Regards,
Eyup
the Telerik team

[Missing User]

Thanks Eyup,

But that doesn't really work, since the UnitsInStock column header doesn't have the anchor with the appropriate tooltip.

<th style="cursor: move;" class="rgHeader" title="Drag to group or reorder" scope="col">
    UnitsInStock
</th>

Notice how this differs from the CategoryName column header, which does work as expected.

<th style="cursor: move;" class="rgHeader" title="Drag to group or reorder" scope="col">
    <a title="category name tooltip" href="javascript:__doPostBack('ctl00$MainContent$grid$ctl00$ctl02$ctl00$ctl02','')">
        CategoryName
    </a>
</th>

I'm assuming I'm not the first person to run into this problem.

Any other ideas?

Is there any way to manipulate the "priority" for example?

Thanks again.

[Eyup]

Hi John,

You could enhance the suggested approach by adding an if condition. For example:

function columnHeaderHovered(sender, args) {
          var headerTooltip = args.get_gridColumn().get_element().title;
          if (headerTooltip != "") {
              sender.ClientSettings.ClientMessages.DragToGroupOrReorder = headerTooltip;
          }
          else {
              sender.ClientSettings.ClientMessages.DragToGroupOrReorder = "Drag to group or reorder";
          }
      }

That way, you will keep the "Drag to group or reorder" tooltip for columns with no declared tooltips.

I am afraid there is no alternative to do it on server side.

All the best,
Eyup
the Telerik team

[Missing User]

Thanks Eyup,

But that's not it.

Basically the problem is that even though the HTML for the TH is rendered as 

<th scope="col" title="units in stock tooltip" class="rgHeader">UnitsInStock</th>

when I look at 

args.get_gridColumn().get_element().outerHTML

I get 

<th style="cursor: move;" class="rgHeader" title="Drag to group or reorder" scope="col">UnitsInStock</th>

Which you might notice has a different 'title' attribute.

I would write my own javascript to go through the html and change the title manually, but since this is obviously happening via the telerik javascript, I'm not sure if I should mess with it.

Is there anyway I can prevent this from happening??

[Eyup]

Hello John,

I suppose you are facing this issue only on IE since it has different rendering standards. I have modified the provided solution to work also on IE. Generally, drag and group tooltips are getting assigned internally and only way to keep the original declared header tooltips is to overwrite them.

Please find the attached web site and let me know if the suggested approach works on your side too.

Another approach would be to manually traverse and declare the header titles on client-side as you have suggested.

All the best,
Eyup
the Telerik team