Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

TagCloud / Filtering and Sorting of the Items

The first slider sets the minimal weight an item must have (MinimalWeightAllowed), and the second sets the max number of tags (MaxNumberOfItems) the cloud can have.

Sort Items:

  • Filtering and Sorting of the TagCloud Items

    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.



Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.TagCloud.OrganizeItems.DefaultVB"
        CodeFile="DefaultVB.aspx.vb" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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></title>
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <style type="text/css">
            .mainDiv
            {
                width: 100%;
                min-height: 310px;
                margin-top: 20px;
                height: auto;
            }
        </style>
    </head>
    <body class="BODY">
        <form id="Form2" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" ShowSkinChooser="true" />
        <telerik:RadScriptManager ID="ScriptManager" runat="server" />
        <telerik:RadFormDecorator ID="FormDecorator" runat="server" DecoratedControls="RadioButtons" />
        <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" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="sliderMaxNumItems">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                            UpdatePanelRenderMode="Block" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rblChooseSorting">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTagCloud1" LoadingPanelID="LoadingPanel1"
                            UpdatePanelRenderMode="Block" />
                        <telerik:AjaxUpdatedControl ControlID="rblChooseSorting" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div class="mainDiv">

            <div style="width: 500px; margin-bottom: 50px;">
                <telerik:RadTagCloud ID="RadTagCloud1" runat="server" MaxFontSize="50px" Width="500px"
                    Height="250px" DataTextField="Text" DataWeightField="Weight" RenderItemWeight="true"
                    TakeTopWeightedItems="true">
                </telerik:RadTagCloud>
            </div>
            <qsf:InformationBox ID="minimalWeight" runat="server">
                The first slider sets the minimal weight an item must have (<strong>MinimalWeightAllowed</strong>),
                and the second sets the max number of tags (<strong>MaxNumberOfItems</strong>) the
                cloud can have.
            </qsf:InformationBox>
            <div id="configuratorDiv">
                <div style="float: left;">
                    <br />
                    <telerik:RadSlider ID="sliderMinWeight" runat="server" AutoPostBack="true" ItemType="item"
                        Height="100px" Width="400px" OnValueChanged="RadSlider_ValueChanged">
                        <Items>
                            <telerik:RadSliderItem Value="0" Text="No Min. Weight" />
                            <telerik:RadSliderItem Value="30" Text="30" />
                            <telerik:RadSliderItem Value="60" Text="60" />
                            <telerik:RadSliderItem Value="90" Text="90" />
                            <telerik:RadSliderItem Value="120" Text="120" />
                            <telerik:RadSliderItem Value="150" Text="150" />
                        </Items>
                    </telerik:RadSlider>
                    <telerik:RadSlider ID="sliderMaxNumItems" runat="server" AutoPostBack="true" ItemType="item"
                        Height="70px" Width="400px" OnValueChanged="RadSlider_ValueChanged">
                        <Items>
                            <telerik:RadSliderItem Value="0" Text="All Tags" />
                            <telerik:RadSliderItem Value="3" Text="3" />
                            <telerik:RadSliderItem Value="6" Text="6" />
                            <telerik:RadSliderItem Value="9" Text="9" />
                            <telerik:RadSliderItem Value="12" Text="12" />
                            <telerik:RadSliderItem Value="15" Text="15" />
                        </Items>
                    </telerik:RadSlider>
                </div>
                <div style="float: left; padding: 20px 0 0 100px;">
                    <span style="padding-bottom: 10px; display: block;"><strong>Sort Items:</strong></span>
                    <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>
                </div>
            </div>
        </div>
        <qsf:Footer runat="server" ID="Footer1" ShowCodeViewer="true" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451