Most of the time combining two RadControls together is wonderfully easy. We at Telerik know this; we work hard to have them work together in a way that is both simple and intuitive for developers. But every so often someone asks about hooking up two controls in such a manner that I have to sit back and scratch my head for a few minutes. Thankfully though, the RadControls are flexible enough that I usually can find an answer. Tonight that happened when a customer asked how to add a RadToolTip to a custom toolbar item in the RadEditor for ASP.NET AJAX. I initially thought that it wasn’t possible, but my gut reaction told me that there must be a way. I was right.

Custom toolbar items, or “tools” as we call them, can easily be added to a RadEditor control by adding the new item to its <Tools> collection. You give them functionality by adding an event handler to the RadEditor’s client-side CommandList collection; the event is then called every time the button is clicked. (You can read more about adding custom tools here) But the thing about tools is that they don’t have a lot of options for developers at design time to add custom items like a RadToolTip. There just isn’t much need. However, for the developer eager to bend the rules this can be achieved with minimal effort thanks to the jQuery JavaScript library.

Simply drag a RadToolTip onto the page, create your new tool, and use a jQuery selector to grab the DOM element that contains the new tool (.rade_toolbar.<skinName> .<commandName>). Add onmouseover and onmouseout event handlers to the element in which you show and hide the RadToolTip and you’re good to go. Easy, huh?

Here is the code:

<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["CustomItem"] = function(commandName, editor, args) { 
 // add functionality here
    }
 
 function pageLoad() {
 var toolTip = $find('<%= RadToolTip1.ClientID %>');
        $(".rade_toolbar.Default .CustomItem").mouseover(function() {
            toolTip.set_targetControlID('<%= RadEditor1.ClientID %>');
            toolTip.show();
        });
        $(".rade_toolbar.Default .CustomItem").mouseout(function() {
            toolTip.set_targetControl(null);
            toolTip.hide();
        });
    }
</script>
<telerik:RadEditor ID="RadEditor1" runat="server">
 <Tools>
 <telerik:EditorToolGroup>
 <telerik:EditorTool Name="Bold" />
 <telerik:EditorTool Name="Italic" />
 <telerik:EditorTool Name="Underline" />
 <telerik:EditorSeparator />
 <telerik:EditorTool Name="CustomItem" ShowText="false" /> 
 </telerik:EditorToolGroup>
 </Tools>
</telerik:RadEditor>
 
<telerik:RadToolTip ID="RadToolTip1" runat="server">
    Click here for some really<br />
    special functionality!
</telerik:RadToolTip>

Or, if you prefer to download it and play with it yourself, you can get the source code here.


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments