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

Rad TagCloud availability

9 Answers 157 Views

9 Answers, 1 is accepted

answered on 24 Sep 2010, 06:40 AM

Hello Andrey,

This functionality is not supported out of the box, but it can be easily achieved using RadTagCloud's client-side API. We handle the OnClientClicked event and get the current item. Then we save it into a global variable, and apply the desired CSS. On the next item click we remove the CSS from the previous item, and apply it to the "new" current item. Here is the code:

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

<style type="text/css">

.selectedItem

{

color: Red !important;

background-color: Green !important;

}

</style>

<script type="text/javascript">

var selectedItem = null;

function OnClientItemClicked(tagCloud, args)

{

if (selectedItem)

Sys.UI.DomElement.removeCssClass(selectedItem, "selectedItem");

selectedItem = args.get_item().get_anchorElement();

Sys.UI.DomElement.addCssClass(selectedItem, "selectedItem");

}

</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" OnClientItemClicked="OnClientItemClicked">

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

Best wishes,
Pero
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 12 Nov 2010, 03:31 PM

Hello Andrey,

You can achieve this scenario by saving the current index into a hidden field, and then applying the class in the load client-side event of the RadButton control. Here is the modified source code:

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

<style type="text/css">

.RadTagCloud .selectedItem

{

color: Red !important;

background-color: Green !important;

}

</style>

<script type="text/javascript">

var selectedItem = null;

function OnClientItemClicked(tagCloud, args)

{

var HiddenField1 = $get("HiddenField1");

if (selectedItem)

Sys.UI.DomElement.removeCssClass(selectedItem, "selectedItem");

selectedItem = args.get_item().get_anchorElement();

Sys.UI.DomElement.addCssClass(selectedItem, "selectedItem");

HiddenField1.setAttribute("value", args.get_item().get_index());

}

function OnClientLoad(tagCloud, args)

{

var HiddenField1 = $get("HiddenField1");

var index = HiddenField1.getAttribute("value");

if (index)

{

var currentItem = tagCloud.get_items()[parseInt(index)];

if (currentItem)

Sys.UI.DomElement.addCssClass(currentItem.get_anchorElement(), "selectedItem");

}