ASPxCloudControl Class

A cloud control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v23.2.dll

NuGet Package: DevExpress.Web

Declaration

C#

public class ASPxCloudControl :
    ASPxDataWebControl,
    IControlDesigner

VB.NET

Public Class ASPxCloudControl
    Inherits ASPxDataWebControl
    Implements IControlDesigner

Remarks

ASPxCloudControl uses tag clouds with different sizes and colors to visualize data. The control renders items as links to allow users to drill into the selected category.

Create a Cloud Control

Design Time

ASPxCloudControl is available on the DX.23.2: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.

Drag the control onto a form and customize the control’s settings, or paste the control markup in the page’s source code.

ASPX

<dx:ASPxCloudControl ID="ASPxCloudControl" runat="server" ShowValues="true">
    <Items>
        <dx:CloudControlItem Text="Home" Value="20" NavigateUrl="/home" />
        <dx:CloudControlItem Text="Products" Value="5" NavigateUrl="/products" />
        <dx:CloudControlItem Text="Contacts" Value="10" NavigateUrl="/contacts" />
    </Items>
</dx:ASPxCloudControl>

Run Time

C#

using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
    ASPxCloudControl cloudControl = new ASPxCloudControl();
    CloudControlItem item1 = new CloudControlItem("Home", 20, "/home");
    CloudControlItem item2 = new CloudControlItem("Products", 5, "/products");
    CloudControlItem item3 = new CloudControlItem("Contacts", 10, "/contacts");
    cloudControl.Items.Add(item1);
    cloudControl.Items.Add(item2);
    cloudControl.Items.Add(item3);
    cloudControl.ShowValues = true;
    Page.Form.Controls.Add(cloudControl);
}

VB.NET

Imports DevExpress.Web
...
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    Dim cloudControl As ASPxCloudControl = New ASPxCloudControl()
    Dim item1 As CloudControlItem = New CloudControlItem("Home", 20, "/home")
    Dim item2 As CloudControlItem = New CloudControlItem("Products", 5, "/products")
    Dim item3 As CloudControlItem = New CloudControlItem("Contacts", 10, "/contacts")
    cloudControl.Items.Add(item1)
    cloudControl.Items.Add(item2)
    cloudControl.Items.Add(item3)
    cloudControl.ShowValues = True
    Page.Form.Controls.Add(cloudControl)
End Sub

Client-Side API

The ASPxCloudControl control supports a client-side functionality implemented with the JavaScript language.

Availability	Available by default.
Client object type	ASPxClientCloudControl
Access name	ASPxCloudControl.ClientInstanceName
Events	ASPxCloudControl.ClientSideEvents

Bind to Data

ASPxCloudControl has the ASPxDataWebControl.DataSourceID property to bind the control to a data source.

ASPX

<dx:ASPxCloudControl ID="ASPxCloudControl" runat="server"
    DataSourceID="CountriesDataSource" NavigateUrlField="Name"
    NavigateUrlFormatString="javascript:void('{0}')"
    TextField="Name" ValueField="Traffic"
    OnItemDataBound="CloudControl_ItemDataBound">
    ...
</dx:ASPxCloudControl>

Item View

ASPxCloudControl allows you to use the following properties to display and normalize the item weight:

ASPxCloudControl.ShowValues

Allows you to display the item value (weight).

ASPxCloudControl.RankCount

Specifies the number of ranks to arrange items according to their values (weights).

ASPxCloudControl.Scale

Specifies the algorithm that normalizes the item weight.

ASPX

<dx:ASPxCloudControl ID="ASPxCloudControl" runat="server"
    RankCount="5" Scale="Linear" ShowValues="true">
    ...
</dx:ASPxCloudControl>

Sort Items

The ASPxCloudControl.Sorted property allows you to specify whether to sort items in the control.

ASPX

<dx:ASPxCloudControl ID="ASPxCloudControl" runat="server" Sorted="True">
    ...
</dx:ASPxCloudControl>

Appearance Customization

ASPxCloudControl allows you to customize items appearance. You can use the ASPxCloudControl.MaxColor and ASPxCloudControl.MinColor properties to specify the colors of the most and the least weighted items.

ASPX

<dx:ASPxCloudControl ID="ASPxCloudControl" runat="server"
    MaxColor="Purple" MinColor="Green">
    ...
</dx:ASPxCloudControl>

Implements

Show 15 items

IComponent

IDisposable

IParserAccessor

IDataBindingsAccessor

IControlBuilderAccessor

IControlDesignerAccessor

IExpressionsAccessor

IAttributeAccessor

IUrlResolutionService

INamingContainer

IPostBackDataHandler

IPostBackEventHandler

ICallbackEventHandler

IPropertiesOwner

IDataSourceViewSchemaAccessor

Inheritance

Object

Control

WebControl

ASPxWebControlBase

ASPxWebControl

ASPxDataWebControlBase

ASPxDataWebControl

ASPxCloudControl