how to add item into RadTagCloud from Client Side

4 posts, 0 answers
  1. Umut
    Umut avatar
    6 posts
    Member since:
    Jul 2010

    Posted 31 Dec 2010 Link to this post

    Hello ,

    i have a radtagcloud item , i want use it like shopping - basket.

    user select a row from RadGrid in Client ,  and i want to add "ID" value on grid into RadTagCloud via Java Script. How can i do that ?

    here is the code below :

     

    function

     

    OnRowSelected(sender, eventArgs) {

     

     

    // add into radtagcloud

     

     

     

    var colIndex = 0;

     

     

    var rowIndex = eventArgs._itemIndexHierarchical;

     

     

    if (rowIndex > -1) {

     

     

    var value = sender._selection._masterTable.children[rowIndex].cells[colIndex].innerText;

     

     

    if (value != null) {

     

     

    // add this item into cloud.

     

    ??

     

     

     

     

     

     

                             }

    }

     

    }

    }

    thanks

  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 03 Jan 2011 Link to this post

    Hi Umut,

    It is not possible to create and add RadTagCloud Item on the client-side. This can be done on the server-side only. So, I would recommend ajaxfying the RadTagCloud control and adding the desired TagCloud item on the server.

    Greetings,
    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. Umut
    Umut avatar
    6 posts
    Member since:
    Jul 2010

    Posted 03 Jan 2011 Link to this post

    Well, i can remove RadCloud item from Client Side.

    So , I thought if i can remove the items via Client, of Course I should add item like this way..

    Here is the code below how can we remove item from client :


                     function OnClientItemClicked(cloud, args) {
                           
                               if (cloud.get_id() == "RadTagCloudOrder")
                                              {

                                  $telerik.$(args.get_item().get_element()).remove();

                                              }

                               return false;
                                
                           }

    thank you anyway.

  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 04 Jan 2011 Link to this post

    Hi Umut,

    What I meant in my previous post was, that there is no out-of-the-box way to create an item on the client, and have it persist on the server. With a bit of JavaScript code the item can be created and added to the list of TagCloud items, but please note that on the first postback, if the same item is not added on the server, it will disappear from the cloud.
    The following JavaScript function creates and adds item to the TagCloud:

    <!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>
        <script type="text/javascript">
            function AddItem()
            {
                var tagCloud = $find("TagCloud1");
     
                var liElement = document.createElement("li");
                liElement.innerHTML = "<a href='http://www.telerik.com' ref='tag' title='Telerik'>Telerik</a>";
                Sys.UI.DomElement.addCssClass(liElement, "rtcTagItem");
                tagCloud.get_containerElement().appendChild(liElement);
     
                var tagCloudItem = $create(Telerik.Web.UI.RadTagCloudItem, { navigateUrl: "http://www.telerik.com" }, null, null, liElement);
                Array.add(tagCloud.get_items(), tagCloudItem);
            }
         
        </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>
            <input type="button" onclick="AddItem();" value="Add Item" />
        </div>
        <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px">
            <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" />
            </Items>
        </telerik:RadTagCloud>
        </form>
    </body>
    </html>


    Greetings,
    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.
Back to Top