TagCloud - Filtering and Sorting of the Items

Demo Configurator

Filter tags
  • Minimum weight:
  • Maximum tag count:
Sort Tags




Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadTagCloud provides an easy way of organizing the tags, by setting a couple of properties. This way the user can choose which tags and in what order they will appear in the cloud. In the example above, use the first slider to specify the lower bound for the tags, and the second to specify the maximal number of items the tagCloud could have.

The sorting of the items is controlled by the Sorting property. By setting it to one of the possible values: NotSorted (default), AlphabeticAsc, AlphabeticDsc, WeightedAsc and WeightedDsc, the user can choose how the items will be listed in the cloud. The items can be sorted alphabetically or based on their weight, in ascending or descending order.

Items can be filtered by setting either of the following properties:
  • MinimalWeightAllowed- specifies the lower bound for the item Weight. If the Weight of the item is smaller than this bound, the tag will not appear in the cloud. The default value is 0.0, which means the items will not be filtered.
  • MaxNumberOfItems - specifies the maximal number of items that can (will) be shown in the cloud. If the TakeTopWeightedItems property is set to true, the items with the highest weight will be taken. The default value is 0, which means the items will not be filtered.

Please note that, neither the filtering, nor the sorting, modifies the Items collection of the TagCloud, but it only displays the items that satisfy the conditions and values, set by the respective (Sorting, MinimalWeightAllowed, etc.) properties. This is because, the user should be able to return to the previous state of the Items collection.
To get the items that are filtered use the RadTagCloud.Items.Filter() method, and for the sorted use RadTagCloud.Items.Sort() method. Both methods return a collection of TagCloud items.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.TagCloud.OrganizeItems.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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 runat="server">
    <title>Telerik ASP.NET Example</title>
</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="sliderMinWeight">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                                                UpdatePanelRenderMode="Block"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="sliderMaxNumItems">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                                                UpdatePanelRenderMode="Block"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="rblChooseSorting">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                                                UpdatePanelRenderMode="Block"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="rblChooseSorting"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-narrow">
        <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud1" runat="server" MaxFontSize="4em" DataTextField="Text" DataWeightField="Weight" RenderItemWeight="true"
                             TakeTopWeightedItems="true">
        </telerik:RadTagCloud>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:ConfiguratorColumn Title="Filter tags" runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Minimum weight:</span>
                            <telerik:RadSlider RenderMode="Lightweight" ID="sliderMinWeight" runat="server" AutoPostBack="true" ItemType="item"
                                               TrackPosition="BottomRight" Height="40px" Width="400px" OnValueChanged="RadSlider_ValueChanged">
                                <Items>
                                    <telerik:RadSliderItem Value="0" Text="None"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="30" Text="30"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="60" Text="60"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="90" Text="90"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="120" Text="120"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="150" Text="150"></telerik:RadSliderItem>
                                </Items>
                            </telerik:RadSlider>
                        </li>
                        <li>
                            <span class="label">Maximum tag count:</span>
                            <telerik:RadSlider RenderMode="Lightweight" ID="sliderMaxNumItems" runat="server" AutoPostBack="true" ItemType="item"
                                               TrackPosition="BottomRight" Height="40px" Width="400px" OnValueChanged="RadSlider_ValueChanged">
                                <Items>
                                    <telerik:RadSliderItem Value="0" Text="All Tags"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="3" Text="3"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="6" Text="6"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="9" Text="9"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="12" Text="12"></telerik:RadSliderItem>
                                    <telerik:RadSliderItem Value="15" Text="15"></telerik:RadSliderItem>
                                </Items>
                            </telerik:RadSlider>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn Title="Sort Tags" runat="server">
                    <asp:RadioButtonList ID="rblChooseSorting" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList_SelectedIndexChanged">
                        <asp:ListItem Text="NotSorted"></asp:ListItem>
                        <asp:ListItem Text="AlphabeticAsc"></asp:ListItem>
                        <asp:ListItem Text="AlphabeticDsc"></asp:ListItem>
                        <asp:ListItem Text="WeightedAsc"></asp:ListItem>
                        <asp:ListItem Text="WeightedDsc"></asp:ListItem>
                    </asp:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?