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

Client-side API

  • Demo Configurator
  • Add Tag
  • Remove Tag

The client-side API of the RadTagCloud can be used to achieve rich experience for the users by avoiding postbacks to ensure operations are as fast as possible. This also reduces the server load which improves the performance of the entire site.

There are more methods and events than shown in the demo and more information about them is available in the pages from the Related Resources section. The most notable example is the requestItems(arguments) method that initiates a Load-on-demand request for new items via a WebService or a WCF WebService.

This demo shows how items can be added and removed on the client via JavaScript. Such changes are not persisted across postbacks.

The demo also utilizes the OnClientItemClicked event to expose information about the clicked item. In this case a search related to the item is shown in a RadWindow.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <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 id="tagCloudWrapper" class="demo-container size-narrow">
        <h2>Most popular searches</h2>
        <telerik:RadTagCloud RenderMode="Lightweight" ID="RadTagCloud1" runat="server" Sorting="WeightedDsc"
                             OnClientItemClicked="OnClientItemClicked" OnClientLoad="tagCloud_load">
            <Items>
                <telerik:RadTagCloudItem Text="ASP.NET" Weight="12"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="AJAX" Weight="134"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="VB" Weight="56"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="C#" Weight="38"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Web" Weight="73"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="jQuery" Weight="23"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text=".NET" Weight="78"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Code" Weight="50"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="UI" Weight="80"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Unit" Weight="20"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Class" Weight="50"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Tools" Weight="40"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Dynamic" Weight="58"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="HTTP" Weight="64"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Start" Weight="62"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Response" Weight="23.7"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Client-side" Weight="55"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Default" Weight="8.5"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Event" Weight="45"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Property" Weight="24"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Tests" Weight="81"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Method" Weight="87"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="DataSource" Weight="34"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="JavaScript" Weight="35.70"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Server-side" Weight="59.3"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Accessibility" Weight="15.7"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="HTML5" Weight="90"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="XHTML" Weight="47.8"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Compliance" Weight="29.45"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Callback" Weight="53"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Request" Weight="39.3"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Postback" Weight="9.5"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="DOM" Weight="65.49"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Markup" Weight="35.49"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Trigger" Weight="24.975"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="XML" Weight="43.975"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="CSS" Weight="14.392"></telerik:RadTagCloudItem>
                <telerik:RadTagCloudItem Text="Object" Weight="85.6"></telerik:RadTagCloudItem>
            </Items>
        </telerik:RadTagCloud>
    </div>
    <telerik:RadWindowManager RenderMode="Lightweight" runat="server" ID="RadWindowManager1" ShowContentDuringLoad="false">
        <Windows>
            <telerik:RadWindow RenderMode="Lightweight" runat="server" ID="RadWindowSearch" Left="350px" OffsetElementID="tagCloudWrapper"
                               Width="500px" VisibleStatusbar="false">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View Title="Add Tag" runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:TextBox ID="Textbox1" Label="Choose text" runat="server" ClientEvents-OnLoad="addTextBox_load" />
                    </li>
                    <li>
                        <qsf:NumericTextBox ID="RadNumericTexbox1" Label="Choose weight" runat="server" ClientEvents-OnLoad="addWeightBox_load" />
                    </li>
                    <li>
                        <qsf:Button ID="Button1" Text="Add tag" OnClientClicked="addNewItem" AutoPostBack="false" runat="server" />
                    </li>
                </ul>
            </qsf:View>
            <qsf:View Title="Remove Tag" runat="server">
                <ul class="fb-group">
                    <li>
                        <qsf:TextBox ID="Textbox3" Label="Choose item by text" ClientEvents-OnLoad="removeTextBox_load" runat="server" />
                    </li>
                    <li>
                        <qsf:Button ID="Button2" Text="Remove Tag" OnClientClicked="removeItem" AutoPostBack="false" runat="server" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance