RadToolTip(Manager) on RadGrid column header

14 posts, 0 answers
  1. Gosha
    Gosha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 20 Sep 2010 Link to this post

    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?
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Sep 2010 Link to this post

    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
  3. Gosha
    Gosha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 23 Sep 2010 Link to this post

    How to run this code?
    I cant call Header ItemEvent, how to do that?
    I tried everything with grid but get only pager ItemEvent!
  4. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 23 Sep 2010 Link to this post

    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.
  5. Gosha
    Gosha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 23 Sep 2010 Link to this post

    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" ?
  6. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 23 Sep 2010 Link to this post

    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.
  7. Gosha
    Gosha avatar
    36 posts
    Member since:
    Aug 2010

    Posted 23 Sep 2010 Link to this post

    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.
  8. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 24 Sep 2010 Link to this post

    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
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 24 Sep 2010 Link to this post

    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
  10. Vasssek
    Vasssek avatar
    187 posts
    Member since:
    Aug 2010

    Posted 06 Aug 2018 in reply to Svetlina Anati Link to this post

    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

  11. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5077 posts

    Posted 09 Aug 2018 Link to this post

    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.
  12. Vasssek
    Vasssek avatar
    187 posts
    Member since:
    Aug 2010

    Posted 13 Aug 2018 in reply to Marin Bratanov Link to this post

    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

     

  13. Vasssek
    Vasssek avatar
    187 posts
    Member since:
    Aug 2010

    Posted 13 Aug 2018 in reply to Vasssek Link to this post

    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

  14. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5077 posts

    Posted 13 Aug 2018 Link to this post

    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.
Back to Top