Tag Cloud - Selected item

2 posts, 0 answers
  1. Pedro
    Pedro avatar
    1 posts
    Member since:
    Jun 2014

    Posted 28 Apr 2015 Link to this post


    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.

  2. Marin Bratanov
    Marin Bratanov avatar
    3567 posts

    Posted 01 May 2015 Link to this post

    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">
                <telerik:RadTagCloudItem Text="item 1" />
                <telerik:RadTagCloudItem Text="two" />
        <asp:Label ID="Label1" Text="" runat="server" />
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            var selItemIndex = null;
            function OnClientItemClicked(sender, args) {
                selItemIndex = args.get_item().get_index();
            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
                        else {
    /* depending on the rules you want here, you may have to make the selector heavier */
        border: 2px solid red;
    protected void RadTagCloud1_ItemClick(object sender, RadTagCloudEventArgs e)


    Marin Bratanov

    See What's Next in App Development. Register for TelerikNEXT.

  3. DevCraft R3 2016 release webinar banner
Back to Top