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

Weighted Styling of the Items

  • Configure Example
Choose Color Range
Choose UnitType


Choose Font Size Range 10px
50px

RadTagCloud styles the items, with different weight, using font-size and color. The items with greater weight have greater font size, and different color. The user can easily control how the font-size and color is distributed among the tags.

The range of the font size, the keywords could have, can be defined using the MinFontSize and MaxFontSize properties. Both of them take values of type System.Web.UI.WebControls.Unit, so the user can specify whether the font size is applied in pixels, percentage values, em values and so on, by setting the values to the MinFontSize and MaxFontSize in the desired System.Web.UI.WebControls.UnitType.The default values for the MinFontSize and MaxFontSize properties are 10px and 20px, respectively.

Similarly, as the font-size, the fore color of the tagCloud items can be specified using the MinColor and MaxColor properties. The default value of both properties is System.Drawing.Color.Empty, which means the fore color is applied from the built-in skins. Note that you need to supply values to both properties, in order for the items to have their fore color dynamically applied. In case the ForeColor is also specified, the value of the ForeColor property will not be applied.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.TagCloud.Range.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 ID="AjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="sliderRange">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                                                UpdatePanelRenderMode="Block"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rblUnitType">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                                                UpdatePanelRenderMode="Block"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="rblUnitType"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="panelSlider"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="pickerMinColor">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                                                UpdatePanelRenderMode="Block"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="pickerMaxColor">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                                                UpdatePanelRenderMode="Block"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-narrow">
        <h2>Some of the Longest Rivers on Earth </h2>
        <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud1" runat="server" MaxFontSize="4em" MinColor="#909090" MaxColor="#008000">
            <Items>
                <telerik:RadTagCloudItem Text="Ural" Weight="2428"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Yukon" Weight="3700"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Amazon" Weight="6400"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Dnieper" Weight="2287"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Niger" Weight="4200"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Danube" Weight="2850"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Nile" Weight="6650"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Volga" Weight="3645"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Tigris" Weight="1950"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Brahmaputra" Weight="2948"></telerik:RadTagCloudItem>
            </Items>
        </telerik:RadTagCloud>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configure Example"
                           Expanded="true">
        <Views>
            <qsf:View runat="server">
                <qsf:ConfiguratorColumn Title="Choose Color Range" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:ColorPicker ID="pickerMinColor" Label="MinColor" SelectedColor="#909090" AutoPostBack="true" OnColorChanged="ColorPicker_ColorChanged" runat="server" Size="Narrow" />
                        </li>
                        <li>
                            <qsf:ColorPicker ID="pickerMaxColor" Label="MaxColor" SelectedColor="#008000" OnColorChanged="ColorPicker_ColorChanged" AutoPostBack="true" runat="server" Size="Narrow" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn Title="Choose UnitType" runat="server" Size="Narrow">
                    <asp:RadioButtonList ID="rblUnitType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="rblUnitType_SelectedIndexChanged">
                        <asp:ListItem Text="Pixel" Value="Pixel" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Percentage" Value="Percentage"></asp:ListItem>
                        <asp:ListItem Text="Em" Value="Em"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn Title="Choose Font Size Range" runat="server" Size="Wide">
                    <asp:Label ID="lblMin" runat="server" Text="10px" CssClass="slider-label" />
                    <telerik:RadSlider RenderMode="Lightweight" ID="sliderRange" runat="server" AutoPostBack="true" CssClass="inlineSlider"
                                       Width="300" SelectionStart="10" SelectionEnd="50" MinimumValue="10"
                                       MaximumValue="50" ThumbsInteractionMode="Push" IsSelectionRangeEnabled="true"
                                       OnValueChanged="sliderRange_ValueChanged" />
                    <asp:Label ID="lblMax" runat="server" Text="50px" CssClass="slider-label" />
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance