Rad TagCloud availability

10 posts, 0 answers
  1. Vincent Ma
    Vincent Ma avatar
    1 posts
    Member since:
    May 2010

    Posted 12 Jul 2010 Link to this post

    Hi,

    Is it available in the latest version? OR when will it become available?

    thanks,
    Vincent
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 Jul 2010 Link to this post

    Hi Vincent,

    The RadTagCloud will be available in the next official version of the RadControls for ASP.NET AJAX, which will be released very soon. Until then you can explore some of its features on our online demos BETA server: http://demos.telerik.com/aspnet-ajax-beta/tagcloud/examples/default/defaultcs.aspx.

    Regards,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrey
    Andrey avatar
    32 posts
    Member since:
    Jun 2010

    Posted 22 Sep 2010 Link to this post

    Hi,

    It`s possible to change style of seleted tag?

    Thanks,
    Andrey
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 Sep 2010 Link to this post

    Hello Andrey,

    This functionality is not supported out of the box, but it can be easily achieved using RadTagCloud's client-side API. We handle the OnClientClicked event and get the current item. Then we save it into a global variable, and apply the desired CSS. On the next item click we remove the CSS from the previous item, and apply it to the "new" current item. Here is the code:

    <!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>
        <style type="text/css">
            .selectedItem
            {
                color: Red !important;
                background-color: Green !important;
            }
        </style>
        <script type="text/javascript">
            var selectedItem = null;
            function OnClientItemClicked(tagCloud, args)
            {
                if (selectedItem)
                    Sys.UI.DomElement.removeCssClass(selectedItem, "selectedItem");
     
                selectedItem = args.get_item().get_anchorElement();
                Sys.UI.DomElement.addCssClass(selectedItem, "selectedItem");
            }
        </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" OnClientItemClicked="OnClientItemClicked">
            <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>


    Best wishes,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Andrey
    Andrey avatar
    32 posts
    Member since:
    Jun 2010

    Posted 11 Nov 2010 Link to this post

    Yes it works, but when i add OnItemClick event in RadTagCloud, after page reload it`s reset selecte item style for Tag. How can i hold selected item style after OnItemClick event?
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 12 Nov 2010 Link to this post

    Hello Andrey,

    You can achieve this scenario by saving the current index into a hidden field, and then applying the class in the load client-side event of the RadButton control. Here is the modified source code:

    <!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>
        <style type="text/css">
            .RadTagCloud .selectedItem
            {
                color: Red !important;
                background-color: Green !important;
            }
        </style>
        <script type="text/javascript">
            var selectedItem = null;
            function OnClientItemClicked(tagCloud, args)
            {
                var HiddenField1 = $get("HiddenField1");
                if (selectedItem)
                    Sys.UI.DomElement.removeCssClass(selectedItem, "selectedItem");
     
                selectedItem = args.get_item().get_anchorElement();
                Sys.UI.DomElement.addCssClass(selectedItem, "selectedItem");
                HiddenField1.setAttribute("value", args.get_item().get_index());
            }
            function OnClientLoad(tagCloud, args)
            {
                var HiddenField1 = $get("HiddenField1");
                var index = HiddenField1.getAttribute("value");
                if (index)
                {
                    var currentItem = tagCloud.get_items()[parseInt(index)];
                    if (currentItem)
                        Sys.UI.DomElement.addCssClass(currentItem.get_anchorElement(), "selectedItem");
                }
            }
        </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>
            <asp:HiddenField ID="HiddenField1" runat="server" />
        </div>
        <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px" OnClientItemClicked="OnClientItemClicked"
            OnClientLoad="OnClientLoad" 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>


    Kind regards,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Andrey
    Andrey avatar
    32 posts
    Member since:
    Jun 2010

    Posted 15 Nov 2010 Link to this post

    Thanks,
    what i should do to select more then one tag in Rad tag cloud using javascript?

    And why this code not working?
    function getTag()
    {
    var HiddenField1 = $get("<%= HiddenFIleld1.ClientID %>");
    var TagCloud = $get("<%= RadTagCloud.ClientID %>");
    var index = HiddenField1.getAttribute("value");
    if (index)
    {
    var currentItem = TagCloud.get_items()[parseInt(index)];
    }
    }
    How can i use get_items() in javascript function which fires without parameters?


      var HiddenField1 = $get("<%= hfTagItem.ClientID %>");
                var TagCloud = $get("<%= RadTagCloud.ClientID %>");
                var index = HiddenField1.getAttribute("value");
                alert("индекс "+tabindex);
                if (tabindex!=null)
      
      
    var HiddenField1 = $get("<%= hfTagItem.ClientID %>");
                var TagCloud = $get("<%= RadTagCloud.ClientID %>");
                var index = HiddenField1.getAttribute("value");
                alert("индекс "+tabindex);
                if (tabindex!=null)
                {               
                
                    var currentItem = TagCloud.
           {               
                
                    var currentItem = TagCloud.get_items()[parseInt(tabindex)];
      var HiddenField1 = $get("<%= hfTagItem.ClientID %>");
      
    var HiddenField1 = $get("<%= hfTagItem.ClientID %>");
                var TagCloud = $get("<%= RadTagCloud.ClientID %>");
                var index = HiddenField1.getAttribute("value");
                alert("индекс "+tabindex);
                if (tabindex!=null)
                {               
                
                    var currentItem = TagCloud.
             var TagCloud = $get("<%= RadTagCloud.ClientID %>");
                var index = HiddenField1.getAttribute("value");
                alert("индекс "+tabindex);
      
    var HiddenField1 = $get("<%= hfTagItem.ClientID %>");
                var TagCloud = $get("<%= RadTagCloud.ClientID %>");
                var index = HiddenField1.getAttribute("value");
                alert("индекс "+tabindex);
                if (tabindex!=null)
                {               
                
                    var currentItem = TagCloud.
             {               
                
                    var currentItem = TagCloud.get_items()[parseInt(tabindex)];
    var HiddenField1 = $get("<%= hfTagItem.ClientID %>");
                var TagCloud = $get("<%= RadTagCloud.ClientID %>");
                var index = HiddenField1.getAttribute("value");
                alert("индекс "+tabindex);
                if (tabindex!=null)
                {               
                
                    var currentItem = TagCloud.

  9. Andrey
    Andrey avatar
    32 posts
    Member since:
    Jun 2010

    Posted 15 Nov 2010 Link to this post

    And why method $find returns null if trying to get RadTagCloud.
  10. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 15 Nov 2010 Link to this post

    Hello Vincent,

    When are you calling this getTag method? In the page load event? If so, the reason $find returns null is because the RadTagCloud javascript object has not been created yet. You would need to call the method like so, if that is your case:

    Sys.Application.add_load(getTag);

    I hope that helps.
  11. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 17 Nov 2010 Link to this post

    Hi Andrey,

    Could you please confirm that the $find method returns null? I tested it in Sys.Application.load and in the TagCloud's load event, and it correctly finds the ajax component.

    To select more than one item, you could save the indexes of the currently selected items in a hidden field, and then apply the css classes to the items when the TagCloud is loaded. For your convenience I have implemented this in the sample from my previous post:

    <!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>
        <style type="text/css">
            .RadTagCloud .selectedItem
            {
                color: Red !important;
                background-color: Green !important;
            }
        </style>
        <script type="text/javascript">
            var selectedItem = null;
            var selectedIndexes = [];
            function OnClientItemClicked(tagCloud, args)
            {
                var HiddenField1 = $get("HiddenField1");
     
                selectedItem = args.get_item().get_anchorElement();
                Sys.UI.DomElement.addCssClass(selectedItem, "selectedItem");
                Array.add(selectedIndexes, args.get_item().get_index());
                HiddenField1.setAttribute("value", Sys.Serialization.JavaScriptSerializer.serialize(selectedIndexes));
            }
            function OnClientLoad(tagCloud, args)
            {
                var HiddenField1 = $get("HiddenField1");
                var value = HiddenField1.getAttribute("value");
     
                if (value)
                {
                    selectedIndexes = Sys.Serialization.JavaScriptSerializer.deserialize(value);
                }
     
                if (selectedIndexes && selectedIndexes.length > 0)
                {
                    var length = selectedIndexes.length;
                    for (var i = 0; i < length; i++)
                    {
                        index = selectedIndexes[i];
                        var currentItem = tagCloud.get_items()[parseInt(index)];
                        if (currentItem)
                            Sys.UI.DomElement.addCssClass(currentItem.get_anchorElement(), "selectedItem");
                    }
                }
            }
        </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>
            <asp:HiddenField ID="HiddenField1" runat="server" />
        </div>
        <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px" OnClientItemClicked="OnClientItemClicked"
            OnClientLoad="OnClientLoad" 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>


    Greetings,
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017