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

Getting Started with the Telerik WebForms TagCloud

Synopsis: The following tutorial demonstrates how to set up a page with RadTagCloud and manually populate the control with keywords. The walk-through will also show how to sort the items alphabetically in ascending order.

  1. Add a RadTagCloud control in the default page of a new ASP.NET AJAX-enabled Web Application.

    Getting Started with the Telerik WebForms TagCloud

  2. In the Source view of the .aspx page, find the definition of the TagCloud, and add the <Items></Items> inner property.

  3. Add the following list of items between the opening and the closing tag of the <Items> property. Every item represents a country, with the Weight of the item equal representing the millions of people living there, and the NavigateUrl pointing to the country's Wikipedia article

        <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud1" runat="server" Width="400px" MaxFontSize="50px">
            <telerik:RadTagCloudItem Text="Russia" Weight="141.9" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="Nigeria" Weight="154.7" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="Saudi Arabia" Weight="28.6" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="Canada" Weight="34.1" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="USA" Weight="309.4" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="Sweden" Weight="9.3" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="Germany" Weight="81.7" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="Turkey" Weight="72.5" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="Japan" Weight="127.3" NavigateUrl="" />
            <telerik:RadTagCloudItem Text="France" Weight="65.4" NavigateUrl="" />
  4. Set the following properties in the Properties Window of RadTagCloud Width="400px"MaxFontSize="50px"Sorting="AlphabeticAsc"

  5. Press F5 to run the application. When a tag is clicked the browser navigates to the respective Wikipedia article.


In this article