Quantcast
Channel: Telerik Forums RSS
Viewing all articles
Browse latest Browse all 94857

Tag Cloud - Selected item

$
0
0

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
 

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

 

Viewing all articles
Browse latest Browse all 94857

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>