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

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

5 Answers 75 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Missing User
Missing User asked on 19 Jun 2012, 05:04 PM
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

5 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 20 Jun 2012, 03:14 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Missing User
answered on 20 Jun 2012, 05:22 PM
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.
0
Eyup
Telerik team
answered on 21 Jun 2012, 01:44 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Missing User
answered on 22 Jun 2012, 03:38 PM
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??

0
Eyup
Telerik team
answered on 26 Jun 2012, 02:11 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Missing User
Answers by
Eyup
Telerik team
Missing User
Share this question
or