TagCloud

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadTagCloud - Telerik's ASP.NET TagCloud

Configure Example
Distribution
Sorting
MinimalWeightAllowed
MaxNumberOfItems
TakeTopWeightedItems
RenderItemWeight
MinFontSize(px,%,em)*
MaxFontSize(px,%,em)*

tlrk.it/18v8Qbe To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/18v8Qbe

About RadTagCloud for ASP.NET AJAX

Telerik RadTagCloud for ASP.NET AJAX is a flexible UI component that displays a collection of user-generated tags accompanying the articles, posts, or videos on your website. Each tag has weight which corresponds to its popularity, importance or recurrence on the page. The keywords in the cloud have their own URL which navigates to a collection of items associated with the relevant tag. The user can easily customize the appearance of the control, choose the items that will be displayed in the cloud, their font size and color, sort the tags alphabetically or by weight, in ascending or descending order.

RadTagCloud and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular TagCloud demo, you can use the following path to find it in the sample website application:
tagcloud/examples/overview

Key Features

  • Distribution - specifies how the font size will be distributed among the items
  • Sorting - specifies in what order the TagCloud items will be listed. By default they are not sorted
  • Filtering Of The Items - Three properties control the filtering of the items: MinimalWeightAllowed, MaxNumberOfItems and TakeTopWeightedItems
  • MinimalWeightAllowed - specifies the lower bound for the item Weight
  • MaxNumberOfItems - specifies the maximal number of items that can (will) be shown in the cloud
  • MinFontSize and MaxFontSize - specify the range of the font size, the TagCloud items could have

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.TagCloud.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/TagCloud/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET Tag Cloud Examples | RadTagCloud control by Telerik</title>
     <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
     <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="500">
     </telerik:RadAjaxLoadingPanel>
     <telerik:RadAjaxPanel ID="AjaxPanel" runat="server" LoadingPanelID="LoadingPanel1">
          <div class="mainDiv">
               <div style="width: 410px; float: left; margin-right: 25px;">
                    <telerik:RadTagCloud ID="RadTagCloud1" runat="server" Width="400px">
                         <Items>
                              <telerik:RadTagCloudItem Text="ASP.NET" Weight="12"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="AJAX" Weight="134"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="VB" Weight="56"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="C#" Weight="38"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Web" Weight="73"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="jQuery" Weight="23"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text=".NET" Weight="78"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Code" Weight="50"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="UI" Weight="80"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Unit" Weight="20"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Class" Weight="50"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Tools" Weight="40"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Dynamic" Weight="58"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Telerik" Weight="60"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="HTTP" Weight="64"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Start" Weight="62"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Response" Weight="23.7"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Client-side" Weight="55"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Default" Weight="8.5"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Event" Weight="45"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Property" Weight="24"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Tests" Weight="81"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Method" Weight="87"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="DataSource" Weight="34"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="JavaScript" Weight="35.70"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Server-side" Weight="59.3"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Accessibility" Weight="15.7"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="HTML5" Weight="90"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="XHTML" Weight="47.8"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Compliance" Weight="29.45"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Callback" Weight="53"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Request" Weight="39.3"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Postback" Weight="9.5"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="DOM" Weight="65.49"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Markup" Weight="35.49"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Trigger" Weight="24.975"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="XML" Weight="43.975"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="CSS" Weight="14.392"></telerik:RadTagCloudItem>
                              <telerik:RadTagCloudItem Text="Object" Weight="85.6"></telerik:RadTagCloudItem>
                         </Items>
                    </telerik:RadTagCloud>
               </div>
               <div style="float: left;">
                    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configure Example"
                         Expanded="true" Width="400px">
                         <div id="configurationPanel" class="configurationPanel">
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        Distribution
                                   </div>
                                   <div>
                                        <asp:DropDownList ID="ddlChooseDistribution" Width="170px" runat="server" OnSelectedIndexChanged="rblChooseDistribution_SelectedIndexChanged"
                                             AutoPostBack="true">
                                             <asp:ListItem Text="Linear" Value="Linear"></asp:ListItem>
                                             <asp:ListItem Text="Logarithmic" Value="Logarithmic"></asp:ListItem>
                                        </asp:DropDownList>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        Sorting
                                   </div>
                                   <div>
                                        <asp:DropDownList ID="ddlSortItems" Width="170px" runat="server" OnSelectedIndexChanged="ddlSortItems_SelectedIndexChanged"
                                             AutoPostBack="true">
                                             <asp:ListItem Text="NotSorted" Value="NotSorted"></asp:ListItem>
                                             <asp:ListItem Text="AlphabeticAsc" Value="AlphabeticAsc"></asp:ListItem>
                                             <asp:ListItem Text="AlphabeticDsc" Value="AlphabeticDsc"></asp:ListItem>
                                             <asp:ListItem Text="WeightedAsc" Value="WeightedAsc"></asp:ListItem>
                                             <asp:ListItem Text="WeightedDsc" Value="WeightedDsc"></asp:ListItem>
                                        </asp:DropDownList>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        MinimalWeightAllowed
                                   </div>
                                   <div>
                                        <asp:DropDownList ID="ddlMinWeight" Width="170px" runat="server" AutoPostBack="true"
                                             OnSelectedIndexChanged="ddlMinWeight_SelectedIndexChanged">
                                             <asp:ListItem Text="No Minimal Weight" Value="0"></asp:ListItem>
                                             <asp:ListItem Text="40" Value="40"></asp:ListItem>
                                             <asp:ListItem Text="60" Value="60"></asp:ListItem>
                                             <asp:ListItem Text="80" Value="80"></asp:ListItem>
                                        </asp:DropDownList>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        MaxNumberOfItems
                                   </div>
                                   <div>
                                        <asp:DropDownList ID="ddlMaxFontSize" Width="170px" runat="server" AutoPostBack="true"
                                             OnSelectedIndexChanged="ddlMaxFontSize_SelectedIndexChanged">
                                             <asp:ListItem Text="All Tags" Value="0"></asp:ListItem>
                                             <asp:ListItem Text="10 Tags" Value="10"></asp:ListItem>
                                             <asp:ListItem Text="20 Tags" Value="20"></asp:ListItem>
                                             <asp:ListItem Text="30 Tags" Value="30"></asp:ListItem>
                                        </asp:DropDownList>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        TakeTopWeightedItems
                                   </div>
                                   <div>
                                        <asp:CheckBox ID="cbTakeTopWeightedItems" runat="server" AutoPostBack="true" OnCheckedChanged="cbTakeTopWeightedItems_CheckedChanged">
                                        </asp:CheckBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        RenderItemWeight
                                   </div>
                                   <div>
                                        <asp:CheckBox ID="cbShowItemWeight" runat="server" OnCheckedChanged="cbShowItemWeight_CheckedChanged"
                                             AutoPostBack="true"></asp:CheckBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        MinFontSize(px,%,em)<span style="color: Red;">*</span>
                                   </div>
                                   <div>
                                        <asp:TextBox ID="tbMinFontSize" Width="60px" runat="server"></asp:TextBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName">
                                        MaxFontSize(px,%,em)<span style="color: Red;">*</span>
                                   </div>
                                   <div>
                                        <asp:TextBox ID="tbMaxFontSize" Width="60px" runat="server"></asp:TextBox>
                                   </div>
                              </div>
                              <div class="propertyRow">
                                   <div class="propertyName" style="height: 5px;">
                                   </div>
                                   <div>
                                        <asp:Button ID="btnConfigureTagCloud" runat="server" Text="Set Font-Size" OnClick="btnConfigureTagCloud_Click">
                                        </asp:Button>
                                   </div>
                              </div>
                         </div>
                    </qsf:ConfiguratorPanel>
               </div>
               <div style="clear: both; height: 1px; margin-top: -1px;">
               </div>
          </div>
     </telerik:RadAjaxPanel>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/TagCloud.png" AlternateText="tlrk.it/18v8Qbe" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/18v8Qbe">tlrk.it/18v8Qbe</a>
    </div>
    </form>
</body>
</html>