Adding the onmouseover attribute to RadTagCloud items

3 posts, 1 answers
  1. John Stewart
    John Stewart avatar
    2 posts
    Member since:
    Dec 2009

    Posted 08 Jan 2011 Link to this post

    I have implemented a RadTagCloud and I would like to execute javascript code when a user hovers over one of the items in the cloud.

    How can I add the onmouseover attribute to the individual items rendered in the RadTagCloud?
  2. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 12 Jan 2011 Link to this post

    Hello John,

    To achieve the desired scenario, please handle the load (OnClientLoad property) client-side event of the RadTagCloud, and loop through each tagCloud item to handle the mouse over event. For your convenience I have created a sample project that shows how to do it:

    <!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" />
        <script type="text/javascript">
            function OnMouseOver(e)
            {
                // this refers to the current item
                $get("Label1").innerHTML = this.get_text();
            }
            function OnClientLoad(tagCloud, load)
            {
                var items = tagCloud.get_items();
                var length = items.length;
                for (var i = 0; i < length; i++)
                {
                    var item = items[i];
                    //pass the current item so it can be accessed in the handler
                    var mouseDelegate = Function.createDelegate(item, OnMouseOver);
                    $addHandler(item.get_element().firstChild, "mouseover", mouseDelegate);
                }
            }
        </script>
    </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" OnClientLoad="OnClientLoad">
            <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>



    Kind regards,
    Pero
    the Telerik team
    Browse the vast support resources we have to jump start 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
  4. John Stewart
    John Stewart avatar
    2 posts
    Member since:
    Dec 2009

    Posted 14 Jan 2011 Link to this post

    That was exactly what I needed. Thank you for the excellent reply.
Back to Top