This is a migrated thread and some comments may be shown as answers.
RadToolTip(Manager) on RadGrid column header
13 Answers 138 Views
This is a migrated thread and some comments may be shown as answers.
Gosha
Top achievements
Rank 1
Gosha asked on 21 Sep 2010, 12:16 AM
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?

13 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 23 Sep 2010, 09:37 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Gosha
Top achievements
Rank 1
answered on 23 Sep 2010, 06:40 PM
How to run this code?
I cant call Header ItemEvent, how to do that?
I tried everything with grid but get only pager ItemEvent!
0
Cori
Top achievements
Rank 2
answered on 23 Sep 2010, 07:49 PM
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.
0
Gosha
Top achievements
Rank 1
answered on 23 Sep 2010, 09:05 PM
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" ?
0
Cori
Top achievements
Rank 2
answered on 23 Sep 2010, 09:43 PM
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.
0
Gosha
Top achievements
Rank 1
answered on 23 Sep 2010, 10:28 PM
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.
0
Svetlina Anati
Telerik team
answered on 24 Sep 2010, 08:22 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Svetlina Anati
Telerik team
answered on 24 Sep 2010, 08:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Vasssek
Top achievements
Rank 1
answered on 06 Aug 2018, 09:16 PM

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

0
Marin Bratanov
Telerik team
answered on 09 Aug 2018, 01:11 PM
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
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
Vasssek
Top achievements
Rank 1
answered on 13 Aug 2018, 11:49 AM

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

 

0
Vasssek
Top achievements
Rank 1
answered on 13 Aug 2018, 01:24 PM

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

0
Marin Bratanov
Telerik team
answered on 13 Aug 2018, 05:19 PM
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
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.
Asked by
Gosha
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Gosha
Top achievements
Rank 1
Cori
Top achievements
Rank 2
Vasssek
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or