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

Adding the onmouseover attribute to RadTagCloud items

2 Answers 95 Views

2 Answers, 1 is accepted

Accepted

answered on 12 Jan 2011, 04:31 PM

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:

<!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.