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

Web Service

Event log
  • Demo Configurator
Load items with Weight greater than:3
The NaN option causes request failure.

This example shows how to dynamically load RadTagCloudItems through a Web Service.

The path to the WebService's asmx file and the name of the service method are specified in the WebService-Path and WebService-Method properties of the RadTagCloud's WebServiceSettings tag.

<telerik:RadTagCloud ID="RadTagCloud1" runat="server" OnClientItemsRequesting="itemsRequesting" OnClientItemsRequested="itemsRequested" OnClientItemsRequestFailed="itemsRequestFailed">
    <WebServiceSettings Path="VehiclesWeightByRating.asmx"Method="GetRadTagCloudItems" />
</telerik:RadTagCloud>

Use the RadTagCloud's requestItems client method to send items request with a specified argument to a Web Service. It is important to know that all current items will be removed, before the new ones are populated.

There are three client events where you can handle the items request:

  • OnClientItemsRequesting - fired before the request is sent to the Web Service. Here you can modify the parematers, which are sent to the Web Service or cancel the request.
  • OnClientItemsRequested - fired when the items are successfully loaded.
  • OnClientItemsRequestFailed - fired when the request for the itemsfails. The arguments provide information about the error message and allow the developer to cancel the error alert and process the error otherwise.

To use the WebService support of RadTagCloud, the WebService should have the following signature:

[ScriptService]
public class WebServiceName : WebService
{
    [WebMethod]
    public TagDataItem[] GetRadTagCloudItems(Object context)
    {
        List<TagDataItem> result = new List<TagDataItem>();
        TagDataItem item = new TagDataItem();
        item.Text = "Item";
        item.Weight = 6.6;
        item.NavigateUrl = "NavigateUrl";
        item.AccessKey = "AccessKey";
        item.TabIndex = 5;
        item.ToolTip = "ToolTip";
        result.Add(item);
 
        return result.ToArray();
    }
}
 
  • DefaultCS.aspx
  • scripts.js
<%@ Page Language="C#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud1" runat="server" RenderItemWeight="true" MaxColor="Green"
                             MinColor="Red" OnClientItemsRequesting="itemsRequesting" OnClientItemsRequested="itemsRequested"
                             OnClientItemsRequestFailed="itemsRequestFailed" OnClientLoad="tagCloud_load">
            <WebServiceSettings Path="VehiclesWeightByRating.asmx" Method="GetRadTagCloudItems">
            </WebServiceSettings>
        </telerik:RadTagCloud>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true">
    </qsf:EventLogConsole>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Expanded="True" Orientation="Vertical">
        <Views>
            <qsf:View runat="server">
                <qsf:DropDownList ID="MinWeightDD" Label="Load items with Weight greater than:" runat="server" AutoPostBack="false" OnClientSelectedIndexChanged="selectedIndexChanged">
                    <Items>
                        <telerik:DropDownListItem Text="3" Value="3" />
                        <telerik:DropDownListItem Text="3.5" Value="3.5" />
                        <telerik:DropDownListItem Text="4" Value="4" />
                        <telerik:DropDownListItem Text="4.5" Value="4.5" />
                        <telerik:DropDownListItem Text="NaN" Value="n/a" />
                    </Items>
                </qsf:DropDownList>
                <div>
                    <em>The NaN option causes request failure.</em>
                </div>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance