Invoke javascript code to open radwindow on click of tag item

7 posts, 0 answers
  1. G S S
    G S S avatar
    85 posts
    Member since:
    Mar 2008

    Posted 01 Feb 2011 Link to this post

    Hi,

    I am using the radtagcloud control, but when I click an item, I want to invoke Javascript (The following):

        function openWin(Url) {
            var oWnd = radopen(Url, "RadWindow4");

            oWnd.moveTo(50, 200);
        }

    I currently invoke this code to open radwindows with content, on my site. This is from an ASP.NET button, though (OnClientClick). I need to do the same, via the tagcloud control.

    Any ideas how much appreciated!

    Thanks
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 02 Feb 2011 Link to this post

    Hello,

    You should use the OnClientItemClicking event for this purpose. Here is a sample:

    <!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>
        <script type="text/javascript">
            function OnClientItemClicking(button, args)
            {
                openWin("http://www.telerik.com");
                args.set_cancel(true);
            }
            function openWin(Url)
            {
                var oWnd = radopen(Url, "RadWindow4");
     
                oWnd.moveTo(50, 200);
            }
        </script>
        <telerik:RadWindowManager ID="manager1" runat="server">
        </telerik:RadWindowManager>
        <div>
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </div>
        <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px" OnClientItemClicking="OnClientItemClicking">
            <Items>
                <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" />
                <telerik:RadTagCloudItem Text="AJAX" Weight="134" />
                <telerik:RadTagCloudItem Text="VB" Weight="56" />
                <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 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. G S S
    G S S avatar
    85 posts
    Member since:
    Mar 2008

    Posted 02 Feb 2011 Link to this post

    Hi,

    That looks good, but the problem is, I need if/else logic to deduce which tag item was clicked, e:g:


    function OnClientItemClicking(button, args)  
    {
            if (args.ItemName="telerik"){

                openWin("http://www.telerik.com");
                args.set_cancel(true);
            }

            else if (args.ItemName = "something else") ....
     }


    Is this possible? I don't know the members of the args class. Could you please advise?

    Thanks
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 03 Feb 2011 Link to this post

    Hello,

    args.get_item() will get a reference to the item that was clicked. The TagCloud item on the other hand has methods and properties for getting the text and navigateUrl set to the current item.
    Here is the modified code that uses different urls:

    <!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>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <script type="text/javascript">
            function OnClientItemClicking(button, args)
            {
                var itemClicked = args.get_item();
                alert("Text: " + itemClicked.get_text() + "    URL: " + itemClicked.get_navigateUrl());
                openWin(itemClicked.get_navigateUrl());
                args.set_cancel(true);
            }
            function openWin(Url)
            {
                var oWnd = radopen(Url, "RadWindow4");
     
                oWnd.moveTo(50, 200);
            }
        </script>
        <telerik:RadWindowManager ID="manager1" runat="server">
        </telerik:RadWindowManager>
        <div>
            <asp:Label ID="Label1" runat="server"></asp:Label>
        </div>
        <telerik:RadTagCloud ID="TagCloud1" runat="server" Width="400px" OnClientItemClicking="OnClientItemClicking">
            <Items>
                <telerik:RadTagCloudItem Text="ASP.NET" Weight="12" NavigateUrl="http://www.asp.net" />
                <telerik:RadTagCloudItem Text="Google" Weight="34" NavigateUrl="http://www.google.com" />
                <telerik:RadTagCloudItem Text="Telerik" Weight="134" NavigateUrl="http://www.telerik.com" />
                <telerik:RadTagCloudItem Text="Yahoo" Weight="56" NavigateUrl="http://www.yahoo.com" />
                <telerik:RadTagCloudItem Text="Wiki" Weight="85.6" NavigateUrl="http://en.wikipedia.com" />
            </Items>
        </telerik:RadTagCloud>
        </form>
    </body>
    </html>


    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.
  6. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 19 May 2015 in reply to Pero Link to this post

    This is close to what I need - but how do I pass the id of the row to the URL please?

     Cheers,
    Jon

  7. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 18 Nov 2015 in reply to Jack Link to this post

    Hi again guys....is this even possible please?
    I want to pass the id of the item to radwindow

    Cheers

    Jack

  8. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 18 Nov 2015 in reply to Jack Link to this post

    Just did it...

    Set the NavigateUrl to the ID data column and then split the resultant navigateURL using 'pieces' to get the id
    DataNavigateUrlField="bsid"

    <telerik:RadCodeBlock ID="rcb1" runat="server">
    <script type="text/javascript">
     
        function OnClientItemClicking(button, args) {
            
            var _title = args.get_item().get_text();
            //set the navigate url to the id column
            var _url = args.get_item().get_navigateUrl();
            //split the resultant navigate url into array
            var pieces = _url.split(/[\s\/]+/);
     
          var window = $find('<%= rwShowBS.ClientID %>');
     
          //use pieces to extract the last item (id)
           window.setUrl("../../modals/brainr.aspx?id=" + pieces[pieces.length-1]);
           window.set_title("quozr.com : " + _title);
           window.show();
     
            args.set_cancel(true);
        }
         function OnClientClose(oWnd) {
            oWnd.setUrl(""); // Sets url to blank  
        }
         
        </script>
    </telerik:RadCodeBlock>


    Cheers,
    Jack
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017