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.

   

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

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.