Tag Cloud - Selected item

[Pedro]

Hello,

I'm using Telerik Rad Tag Cloud control with ajax and i want to add a different style to the item that was clicked.

I tried with OnClientItemClicked and while the loading panel is active on my tag cloud control, it displays the correct style of the clicked item, but when it finish the ajax request, it loses the style and gets to its default.

When i click one item, its behavior is send a request to server side so i can refresh other controls on my page, which are properly refreshed.

How can i fix this? Can someone help me?

 Thank you.

[Marin Bratanov]

Hi Pedro,

Such a facility is not available out of the box, tag cloud items do not have an active/clicked state, only a hovered state. Thus, you would need to add a CSS class to the item and add it again after the postback.

Here is an exapmle that you can use as base:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
    <telerik:RadTagCloud runat="server" ID="RadTagCloud1" OnItemClick="RadTagCloud1_ItemClick" AutoPostBack="true" OnClientItemClicked="OnClientItemClicked" OnClientLoad="addSelectedClassToItem">
        <Items>
            <telerik:RadTagCloudItem Text="item 1" />
            <telerik:RadTagCloudItem Text="two" />
        </Items>
    </telerik:RadTagCloud>
    <asp:Label ID="Label1" Text="" runat="server" />
</telerik:RadAjaxPanel>
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script type="text/javascript">
        var selItemIndex = null;

        function OnClientItemClicked(sender, args) {
            selItemIndex = args.get_item().get_index();
            addSelectedClassToItem();
        }
        function addSelectedClassToItem() {
            if (selItemIndex != null) {
                var tagCloud = $find("<%=RadTagCloud1.ClientID%>");
                var items = tagCloud.get_items();
                for (var i = 0; i < items.length; i++) {
                    if (i == selItemIndex) { // you can enhance this condition
                        $telerik.$(items[i].get_element()).addClass("selectedTagCloudItem");
                    }
                    else {
                        $telerik.$(items[i].get_element()).removeClass("selectedTagCloudItem");
                    }
                }
            }
        }
    </script>
</telerik:RadCodeBlock>

/* depending on the rules you want here, you may have to make the selector heavier */
.selectedTagCloudItem
{
    border: 2px solid red;
}

protected void RadTagCloud1_ItemClick(object sender, RadTagCloudEventArgs e)
{
    System.Threading.Thread.Sleep(2000);
    Label1.Text=DateTime.Now.ToString();
}

Regards,

Marin Bratanov
Telerik