Tag Cloud Control
- 3 minutes to read
The ASPxCloudControl brings a very popular web navigation and data analysis UI onto web pages. It organizes hyperlinks by automatically arranging them within the specified area, and indicating their weight (importance) using fonts of different size, different colors and even weight value display. Such data presentation is crucial for sites that allow you to tag content elements (images, articles, etc). In these sites, you can display tags within the ASPxCloudControl, and so provide easy access to elements by their content. Link weight display allows web page visitors to quickly locate the most important information, most frequently visited pages, etc.
Following is the list of ASPxCloudControl features.
- Automatic link coloring, according to link weight. You only need to specify two colors corresponding to the maximum and minimum value. All required shades will then be calculated automatically.
- The ability to display weight values near links. You can customize value color, string format and offset from the corresponding link.
- Customizable text to be displayed before and after each link. This text allows you to separate neighboring links that have the same weight.
- Customizable rank count. This specifies the number of size grades available for links. For instance, if you specify 1, all links will have the same size regardless of their weights. The more size grades are available, the more font sizes are available, and the bigger the difference between the minimum and maximum font size.
- Link sizes can be determined using either linear or logarithmic scale.
- By default, links are displayed in the same order they are in the data source. The ASPxCloudControl also allows you to sort links alphabetically. This way, web-page visitors will have two ways to find the desired link - using either the alphabetic order or the importance factor.
Example
The following example illustrates how to obtain the Text property value of a clicked Iiem on the client side.
<dx:ASPxCloudControl ID="ASPxCloudControl1" runat="server" DataSourceID="AccessDataSource1"
TextField="Name" ValueField="Area">
<ClientSideEvents ItemClick="function(s, e) {
var text = e.htmlElement.innerText;
alert(text);
}" />
</dx:ASPxCloudControl>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Data.mdb"
SelectCommand="SELECT [Name], [Area] FROM [country]"></asp:AccessDataSource>
Elements
The cloud control displays a list of hyperlinks in a cloud of items. Items are rendered with fonts of various sizes depending on the item weight.
The basic visual element of a cloud control is the CloudControlItem. It can be shown along with its essential part that is the item weight, or without it. The item weight, displayed in parentheses, is represented by the CloudControlItem.Value property value.
The items can have different affixes attached (symbols or text at the beginning and at the end of the item string) to emphasize the item content.
The control determines the size of font to display each item automatically according to its CloudControlItem.Value, based on the ASPxCloudControl.RankCount and ASPxCloudControl.Scale property values.
The combinations of the font face and color scheme makes up the visual style of the control.
The table below lists the main members which affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Contents | CloudControlItem.Text, ASPxCloudControl.ItemBeginText, ASPxCloudControl.ItemEndText |
| Weight (Value) | CloudControlItem.Value |
| Navigate URL | CloudControlItem.NavigateUrl |
| Appearance | ASPxCloudControl.ValueColor, ASPxCloudControl.MinColor, ASPxCloudControl.MaxColor, ASPxCloudControl.ItemBeginEndTextColor |