John Stewart
Top achievements
Rank 1
Rank 1
John Stewart
asked on 08 Jan 2011, 05:49 PM
I have implemented a RadTagCloud and I would like to execute javascript code when a user hovers over one of the items in the cloud.
How can I add the onmouseover attribute to the individual items rendered in the RadTagCloud?
How can I add the onmouseover attribute to the individual items rendered in the RadTagCloud?
2 Answers, 1 is accepted
0
Accepted
Hello John,
To achieve the desired scenario, please handle the load (OnClientLoad property) client-side event of the RadTagCloud, and loop through each tagCloud item to handle the mouse over event. For your convenience I have created a sample project that shows how to do it:
Kind regards,
Pero
the Telerik team
To achieve the desired scenario, please handle the load (OnClientLoad property) client-side event of the RadTagCloud, and loop through each tagCloud item to handle the mouse over event. For your convenience I have created a sample project that shows how to do it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> <script type="text/javascript"> function OnMouseOver(e) { // this refers to the current item $get("Label1").innerHTML = this.get_text(); } function OnClientLoad(tagCloud, load) { var items = tagCloud.get_items(); var length = items.length; for (var i = 0; i < length; i++) { var item = items[i]; //pass the current item so it can be accessed in the handler var mouseDelegate = Function.createDelegate(item, OnMouseOver); $addHandler(item.get_element().firstChild, "mouseover", mouseDelegate); } } </script></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> </telerik:RadScriptManager> <div> <asp:Label ID="Label1" runat="server"></asp:Label> </div> <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px" OnClientLoad="OnClientLoad"> <Items> <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" /> <telerik:RadTagCloudItem Text="AJAX" Weight="134" /> <telerik:RadTagCloudItem Text="VB" Weight="56" /> <telerik:RadTagCloudItem Text="C#" Weight="38" /> <telerik:RadTagCloudItem Text="Web" Weight="73" /> <telerik:RadTagCloudItem Text="jQuery" Weight="23" /> <telerik:RadTagCloudItem Text=".NET" Weight="78" /> <telerik:RadTagCloudItem Text="Code" Weight="50" /> <telerik:RadTagCloudItem Text="UI" Weight="80" /> <telerik:RadTagCloudItem Text="Unit" Weight="20" /> <telerik:RadTagCloudItem Text="Class" Weight="50" /> <telerik:RadTagCloudItem Text="Tools" Weight="40" /> <telerik:RadTagCloudItem Text="Dynamic" Weight="58" /> <telerik:RadTagCloudItem Text="Telerik" Weight="60" /> <telerik:RadTagCloudItem Text="HTTP" Weight="64" /> <telerik:RadTagCloudItem Text="Start" Weight="62" /> <telerik:RadTagCloudItem Text="Response" Weight="23.7" /> <telerik:RadTagCloudItem Text="Client-side" Weight="55" /> <telerik:RadTagCloudItem Text="Default" Weight="8.5" /> <telerik:RadTagCloudItem Text="Event" Weight="45" /> <telerik:RadTagCloudItem Text="Property" Weight="24" /> <telerik:RadTagCloudItem Text="Tests" Weight="81" /> <telerik:RadTagCloudItem Text="Method" Weight="87" /> <telerik:RadTagCloudItem Text="DataSource" Weight="34" /> <telerik:RadTagCloudItem Text="JavaScript" Weight="35.70" /> <telerik:RadTagCloudItem Text="Server-side" Weight="59.3" /> <telerik:RadTagCloudItem Text="Accessibility" Weight="15.7" /> <telerik:RadTagCloudItem Text="HTML5" Weight="90" /> <telerik:RadTagCloudItem Text="XHTML" Weight="47.8" /> <telerik:RadTagCloudItem Text="Compliance" Weight="29.45" /> <telerik:RadTagCloudItem Text="Callback" Weight="53" /> <telerik:RadTagCloudItem Text="Request" Weight="39.3" /> <telerik:RadTagCloudItem Text="Postback" Weight="9.5" /> <telerik:RadTagCloudItem Text="DOM" Weight="65.49" /> <telerik:RadTagCloudItem Text="Markup" Weight="35.49" /> <telerik:RadTagCloudItem Text="Trigger" Weight="24.975" /> <telerik:RadTagCloudItem Text="XML" Weight="43.975" /> <telerik:RadTagCloudItem Text="CSS" Weight="14.392" /> <telerik:RadTagCloudItem Text="Object" Weight="85.6" /> </Items> </telerik:RadTagCloud> </form></body></html>Kind regards,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
John Stewart
Top achievements
Rank 1
Rank 1
answered on 15 Jan 2011, 01:03 AM
That was exactly what I needed. Thank you for the excellent reply.