New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

WebForms TagCloud Overview

  • Configure Example
  • TagCloud Settings
  • Font-size Range
  • DistributionLinear
  • SortNotSorted
  • MinimalWeightAllowedNo Minimal Weight
  • MaxNumberOfItemsAll Tags
  • MinFontSize (px,%,em)*
  • MaxFontSize (px,%,em)*

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 120+ 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.

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

* The MinFontSize and MaxFontSize properties accept values of type System.Web.UI.WebControls.Unit. The font-size of the TagCloud items will have the same System.Web.UI.WebControls.UnitType as the one of the properties.

More about RadTagCloud for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.TagCloud.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" MinDisplayTime="500">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ChooseDistributionDD" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-narrow">
        <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud1" runat="server">
            <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>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance