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

Wcf Service

Event log
  • Demo Configurator
Load items with unit price greater than:5.00
The NaN option causes request failure.

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

The path to the WcfService's svc 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="TagCloudWcfService.svc"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 WcfService support of RadTagCloud, the WcfService should have the following signature:

[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class TagCloudWcfService
{
    [OperationContract]
    public TagDataItem[] GetRadTagCloudItems(IDictionary<string, object> context)
    {
        NorthwindReadOnlyEntities dataContext = new NorthwindReadOnlyEntities();
        decimal minUnitPrice = (context == null || context.Count == 0) ? 5 : decimal.Parse((string)context["minUnitPrice"]);
        var result = (from v in dataContext.Products
                      where v.UnitPrice > minUnitPrice
                      && v.CategoryID == 8
                      select new TagDataItem
                      {
                          Text = v.ProductName,
                          Weight = (double)v.UnitPrice
                      }).Distinct().Take(15);
 
        return result.ToArray();
    }
}
  • DefaultCS.aspx
  • TagCloudWcfService.cs
  • 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-narrow">
        <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud1" runat="server" RenderItemWeight="true"
                             MinFontSize="10" MaxFontSize="32" OnClientItemsRequesting="itemsRequesting" OnClientItemsRequested="itemsRequested"
                             OnClientItemsRequestFailed="itemsRequestFailed" OnClientLoad="tagCloud_load">
            <WebServiceSettings Path="TagCloudWcfService.svc" Method="GetRadTagCloudItems"></WebServiceSettings>
        </telerik:RadTagCloud>
    </div>
    <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true">
    </qsf:EventLogConsole>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View runat="server">

                <qsf:DropDownList ID="MinWeightDD" Label="Load items with unit price greater than:" runat="server" AutoPostBack="false" OnClientSelectedIndexChanged="selectedIndexChanged">
                    <Items>
                        <telerik:DropDownListItem Text="5.00" Value="5" />
                        <telerik:DropDownListItem Text="10.00" Value="10" />
                        <telerik:DropDownListItem Text="30.00" Value="30" />
                        <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