TagCloud - OnItemClick event

2 posts, 0 answers
  1. Kshitij
    Kshitij avatar
    1 posts
    Member since:
    Nov 2010

    Posted 02 Dec 2010 Link to this post

    I have a tag cloud control that gets populated by by data that gets returned from a stored procedure.

    I want the tag cloud items clickable. On clicking any item in the tag cloud, it will redirect the user to a different page.
    For eg. - If i click an item named "Architecture", the user gets redirected to the page "Default.aspx?CAT=Architecture"

    But for this to happen, I first need to obtain the value of the item that was clicked by the user. I am not able to do that. The demo has nothing on this.

    Can somebody please shed some light? I have a small tag cloud module for a website that needs to be done as quickly as possible.
    Any useful insights will be highly appreciated.
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 07 Dec 2010 Link to this post

    Hi Kshitij,

    The ItemClick server-side event passes the clicked TagCloud item as a event argument to the handler method. You could use the item to get the Text and then execute your business logic. Here is a sample source code that demonstrates this:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </div>
        <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px" OnItemClick="TagCloud1_ItemClick"
            AutoPostBack="true">
            <Items>
                <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" />
                <telerik:RadTagCloudItem Text="AJAX" Weight="134" />
                <telerik:RadTagCloudItem Text="VB" Weight="56" />
                <telerik:RadTagCloudItem Text="C#" Weight="38" />
                <telerik:RadTagCloudItem Text="Web" Weight="73" />
                <telerik:RadTagCloudItem Text="jQuery" Weight="23" />
                <telerik:RadTagCloudItem Text=".NET" Weight="78" />
                <telerik:RadTagCloudItem Text="Code" Weight="50" />
                <telerik:RadTagCloudItem Text="UI" Weight="80" />
                <telerik:RadTagCloudItem Text="Unit" Weight="20" />
                <telerik:RadTagCloudItem Text="Class" Weight="50" />
                <telerik:RadTagCloudItem Text="Tools" Weight="40" />
                <telerik:RadTagCloudItem Text="Dynamic" Weight="58" />
                <telerik:RadTagCloudItem Text="Telerik" Weight="60" />
                <telerik:RadTagCloudItem Text="HTTP" Weight="64" />
                <telerik:RadTagCloudItem Text="Start" Weight="62" />
                <telerik:RadTagCloudItem Text="Response" Weight="23.7" />
                <telerik:RadTagCloudItem Text="Client-side" Weight="55" />
                <telerik:RadTagCloudItem Text="Default" Weight="8.5" />
                <telerik:RadTagCloudItem Text="Event" Weight="45" />
                <telerik:RadTagCloudItem Text="Property" Weight="24" />
                <telerik:RadTagCloudItem Text="Tests" Weight="81" />
                <telerik:RadTagCloudItem Text="Method" Weight="87" />
                <telerik:RadTagCloudItem Text="DataSource" Weight="34" />
                <telerik:RadTagCloudItem Text="JavaScript" Weight="35.70" />
                <telerik:RadTagCloudItem Text="Server-side" Weight="59.3" />
                <telerik:RadTagCloudItem Text="Accessibility" Weight="15.7" />
                <telerik:RadTagCloudItem Text="HTML5" Weight="90" />
                <telerik:RadTagCloudItem Text="XHTML" Weight="47.8" />
                <telerik:RadTagCloudItem Text="Compliance" Weight="29.45" />
                <telerik:RadTagCloudItem Text="Callback" Weight="53" />
                <telerik:RadTagCloudItem Text="Request" Weight="39.3" />
                <telerik:RadTagCloudItem Text="Postback" Weight="9.5" />
                <telerik:RadTagCloudItem Text="DOM" Weight="65.49" />
                <telerik:RadTagCloudItem Text="Markup" Weight="35.49" />
                <telerik:RadTagCloudItem Text="Trigger" Weight="24.975" />
                <telerik:RadTagCloudItem Text="XML" Weight="43.975" />
                <telerik:RadTagCloudItem Text="CSS" Weight="14.392" />
                <telerik:RadTagCloudItem Text="Object" Weight="85.6" />
            </Items>
        </telerik:RadTagCloud>
        </form>
    </body>
    </html>

    using System;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    using System.Data;
    using System.Configuration;
    using System.Web.Security;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Telerik.Web.UI;
     
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void TagCloud1_ItemClick(object sender, RadTagCloudEventArgs e)
        {
            Response.Redirect("ItemClickTagCloud.aspx?CAT=" + e.Item.Text);
        }
    }

    Kind regards,
    Pero
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top