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

Add RadToolTip to a Custom RadWindow Command Button

2 Answers 122 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Xorcist
Top achievements
Rank 1
Xorcist asked on 01 May 2013, 03:52 PM
I have used this tutorial:

http://www.telerik.com/support/kb/aspnet-ajax/window/adding-a-custom-button-to-radwindow-titlebar.aspx

to add a custom button to the title bar of my RadWindow. I now want to add a RadToolTip to that button, so that when I click it I get a nice sticky tooltip which I can use in various ways. but for the life of me I can't get it working. Does anyone have any examples of doing this? I've tried specifying a unique ID for my command button, then using that in conjunction with the tooltip, but it doesn't appear to be working.

my tooltip is defined as such:

<telerik:RadToolTip Animation="Slide" ID="shellRadToolTip" IsClientID="true" Position="BottomLeft" runat="server" ShowEvent="OnClick" style="z-index:10000 !important;" TargetControlID="btnSwitchSite">
  <div>
    TOOLTIP
  </div> 
</telerik:RadToolTip>

my custom button looks like this:

<li><a id="btnSwitchSite" class="rwControlButtonSite" href="javascript:void(0)" ></a></li>

and if I add this code and try to handle it manually:

<li><a id="btnSwitchSite" class="rwControlButtonSite" href="javascript:void(0)" onmousedown="winShell_Site(event);"></a></li>

function winShell_Site(e) {
  var radToolTip = $find('<%= shellRadToolTip.ClientID %>');
  radToolTip.set_text('This is the new tool tip text to display');
  radToolTip.show();
  //alert(radToolTip.get_targetControlID());
}

the tooltip will only show if I uncomment the alert, but it does so at the bottom of the RadWindow, and not anywhere near the control it should be associated with.

2 Answers, 1 is accepted

Sort by
0
Accepted
Kevin
Top achievements
Rank 2
answered on 01 May 2013, 08:53 PM
Hello Xorcist,

If you modify the OnClientShow event like so:
function OnClientShow(radWindow) {
            var TitleBar = radWindow.GetTitlebar();
            var parent = TitleBar.parentNode;
            var oUL = parent.getElementsByTagName('UL')[0];
 
            if (!(oUL.firstChild.id == "customprintbuttonID")) // Check if the element is already added
            {
                // If not - create and add the custom button
                oUL.style.width = "192px";
                var oLI = document.createElement("LI");
                oLI.id = "customprintbuttonID"
                var A = document.createElement("A");
                oLI.appendChild(A);
                A.className = "customprintbutton";
                //A.href = "javascript:void(0)";
                A.title = "Print Content";
               // A.onmousedown = printWin;
                oUL.insertBefore(oLI, oUL.firstChild);
 
                var radToolTip = $find('<%= shellRadToolTip.ClientID %>');
                radToolTip.set_targetControl(A);
 
                //this is required so that RadWindow can display its titlebar properly after being modified
 
                radWindow._updateTitleWidth();
            }
        }

I hope that helps.

Kevin
0
Xorcist
Top achievements
Rank 1
answered on 02 May 2013, 05:19 PM
Thanks. Looks like I was just missing the set_targetControl(); part, once I added that in everything worked as expected.

Tags
ToolTip
Asked by
Xorcist
Top achievements
Rank 1
Answers by
Kevin
Top achievements
Rank 2
Xorcist
Top achievements
Rank 1
Share this question
or