John Stewart
Top achievements
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
answered on 15 Jan 2011, 01:03 AM
That was exactly what I needed. Thank you for the excellent reply.