Edit this page

Getting Started

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.


  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="http://en.wikipedia.org/wiki/Russia" />
            <telerik:RadTagCloudItem Text="Nigeria" Weight="154.7" NavigateUrl="http://en.wikipedia.org/wiki/Nigeria" />
            <telerik:RadTagCloudItem Text="Saudi Arabia" Weight="28.6" NavigateUrl="http://en.wikipedia.org/wiki/Saudi_Arabia" />
            <telerik:RadTagCloudItem Text="Canada" Weight="34.1" NavigateUrl="http://en.wikipedia.org/wiki/Canada" />
            <telerik:RadTagCloudItem Text="USA" Weight="309.4" NavigateUrl="http://en.wikipedia.org/wiki/USA" />
            <telerik:RadTagCloudItem Text="Sweden" Weight="9.3" NavigateUrl="http://en.wikipedia.org/wiki/Sweden" />
            <telerik:RadTagCloudItem Text="Germany" Weight="81.7" NavigateUrl="http://en.wikipedia.org/wiki/Germany" />
            <telerik:RadTagCloudItem Text="Turkey" Weight="72.5" NavigateUrl="http://en.wikipedia.org/wiki/Turkey" />
            <telerik:RadTagCloudItem Text="Japan" Weight="127.3" NavigateUrl="http://en.wikipedia.org/wiki/Japan" />
            <telerik:RadTagCloudItem Text="France" Weight="65.4" NavigateUrl="http://en.wikipedia.org/wiki/France" />
  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.


Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article