RadToolTip(Manager) on RadGrid column header

[Gosha]

I have RadGrid with many custom filters and I want to use RadToolTip(Manager) to show tooltip window with information of applied filter on column with filter. Tooltip can be closed by user manually and then I programmatically remove filter. I have been trying unsuccessfully for three hours to attach RadToolTip to column header because that element does not have either server or client ID. How to open programmatically RadToolTip over column name?

[Svetlina Anati]

Hi Sasa,

 You can use the ClientID of the cell as shown below:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
   {
       if (e.Item.ItemType == GridItemType.Header)
       {
           GridHeaderItem item = e.Item as GridHeaderItem;
           foreach (TableCell cell in item.Cells)
           {
               if ((cell.Controls.Count > 0))
               {
                   // add tooltip to header title link
                   RadToolTipManager1.TargetControls.Add(cell.ClientID, true);
               }
           }
       }
   }

Please, test this solution and let us know how it goes.

All the best,
Svetlina
the Telerik team

[Gosha]

How to run this code?
I cant call Header ItemEvent, how to do that?
I tried everything with grid but get only pager ItemEvent!

[Cori]

Hello Sasa,

The RadGrid has an ItemDataBound event, you would attach it like this:

<telerik:RadGrid ID="RadGrid1" runat="server" OnItemDataBound="RadGrid1_ItemDataBound">
</telerik:RadGrid>

I hope that helps.

[Gosha]

Now code is runing but nothing heapends. There is no tooltip. This appears to be too much for me. Can you just explain to me what to enter in button.click event sub to display RadToolTipManager1 baloon over column header "abc" ?

[Cori]

Hello Sasa,

Try this approach instead.

ASPX Page:

<div id="zone">
            <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnItemDataBound="RadGrid1_ItemDataBound"
                OnNeedDataSource="RadGrid1_NeedDataSource">
                <MasterTableView ShowHeadersWhenNoRecords="true">
                    <Columns>
                        <telerik:GridBoundColumn DataField="ABC" HeaderText="ABC">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </div>
        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" AutoTooltipify="true"
            ToolTipZoneID="zone">
        </telerik:RadToolTipManager>

Code-Behind:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item.ItemType == GridItemType.Header)
        {
            GridHeaderItem item = e.Item as GridHeaderItem;
            foreach (TableCell cell in item.Cells)
            {
                cell.ToolTip = cell.Text;
            }
        }
    }

I hope that helps.

[Gosha]

That works on mouse over but I want to open tooltip from code. I have one button and when I click on it to show tooltip on column(5) header.

[Svetlina Anati]

Hi Sasa,

 I suggest to simply set ShowEvent="OnClick"  for the tooltip as explained below:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/showevent/defaultcs.aspx

Greetings,
Svetlina
the Telerik team

[Svetlina Anati]

Hi Sasa,

 I suggest to simply set ShowEvent="OnClick"  for the tooltip as explained below:

http://demos.telerik.com/aspnet-ajax/tooltip/examples/showevent/defaultcs.aspx

Greetings,
Svetlina
the Telerik team

[Vasssek]

Hello,

how to achieve display radtooltip onmouse over event only on one specific radgrid column header ? I don't want to use  AutoTooltipify="true" because it tooltify everything...

Regards

Vasssek

[Marin Bratanov]

Hello Vasssek,

If you want to have simple text, perhaps the easiest way is to declare it in the grid settings.

<telerik:RadGrid runat="server" ID="rg1" RenderMode="Lightweight" AutoGenerateColumns="false" OnNeedDataSource="rg1_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn HeaderTooltip="aaaaaa" DataField="someField"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderTooltip="" DataField="someColumn"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

If you want to have rich content that does not change, you can use a static RadToolTip and perhaps the easiest way to access the header cell to add it as a target is on the client:

<telerik:RadGrid runat="server" ID="rg1" RenderMode="Lightweight" AutoGenerateColumns="false" OnNeedDataSource="rg1_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn HeaderStyle-CssClass="forTooltip" DataField="someField"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderTooltip="" DataField="someColumn"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:RadToolTip runat="server" ID="rtt1" RelativeTo="Element" Position="BottomCenter" Width="200" Height="100">
    <asp:Label Text="special static content here" runat="server" />
</telerik:RadToolTip>
<script>
    function addTtipToHeader() {
        var headerCell = $telerik.$(".RadGrid .forTooltip").first().get(0);
        var ttipCtrl = $find("<%=rtt1.ClientID%>");
        ttipCtrl.set_targetControl(headerCell);

        Sys.Application.remove_load(addTtipToHeader);
    }
    Sys.Application.add_load(addTtipToHeader);
</script>

With the same approach, you can create a tooltip through the tooltip manager (https://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx):

<telerik:RadGrid runat="server" ID="rg1" RenderMode="Lightweight" AutoGenerateColumns="false" OnNeedDataSource="rg1_NeedDataSource">
    <MasterTableView>
        <Columns>
            <telerik:GridBoundColumn HeaderStyle-CssClass="forTooltip" DataField="someField" HeaderText="first column"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderTooltip="" DataField="someColumn"></telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
<telerik:RadToolTipManager runat="server" ID="rttm1" RelativeTo="Element" Position="BottomCenter" Width="200" Height="100">
</telerik:RadToolTipManager>
<script>
    function addTtipToHeader() {
        var headerCell = $telerik.$(".RadGrid .forTooltip").first().get(0);
        var ttipManagerCtrl = $find("<%=rttm1.ClientID%>");
        var tooltip = ttipManagerCtrl.getToolTipByElement(headerCell);
        if (!tooltip) {
            tooltip = ttipManagerCtrl.createToolTip(headerCell);
            tooltip.set_value(headerCell.innerText)
        }

        Sys.Application.remove_load(addTtipToHeader);
    }
    Sys.Application.add_load(addTtipToHeader);
</script>

Regards,
Marin Bratanov
Progress Telerik

[Vasssek]

Hi,

your suggestion works, but not as expected.

First I have to set tooltip value through declaration of the column, then on column hover both Microsoft original tooltip and RadTooltipManager are shown. If I leave Radgrid column tooltip value empty in column declaration section, then I couldn't set value from client side through tooltip.set_value('') method. Result is that when I hover mouse over column header nothing is shown.

What can I do ?

Best regards

Vasssek

 

[Vasssek]

Hi,

inspired by this link: https://www.telerik.com/forums/getting-column-header-text-client-side#-aT45XsUZUWYKOoigcIBZg i did it :-)

Here is the result function:

function addTtipToHeader() {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                var column = tableView.getColumnByUniqueName("zakazka_HU_navratka");

                //column.get_element().innerHTML = "Changed Column Header";
                headerCell = column.get_element();
                headerCell.title = "- MOP - Zákazka<br>- Expedícia - číslo HU<br>- Návratka - príjemca (Mat. doklad)";

                var ttipManagerCtrl = $find("<%=RadToolTipManager1.ClientID%>");
                var tooltip = ttipManagerCtrl.getToolTipByElement(headerCell);
                if (!tooltip) {
                    tooltip = ttipManagerCtrl.createToolTip(headerCell);
                }
            }

 

This way only radtooltip is shown...

Regards

Vasssek

[Marin Bratanov]

Hi Vasssek,

You may also find interesting this KB article for a similar double tooltip issue, it may just fit your scenario: https://www.telerik.com/support/kb/reporting/create-interactive-ad-hoc-reports/details/two-tooltips-for-header-cell-when-column-resizing-is-enabled.

Regards,
Marin Bratanov
Progress Telerik