Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Invoke javascript code to open radwindow on click of tag item

6 Answers 357 Views
TagCloud
This is a migrated thread and some comments may be shown as answers.
G S S
Top achievements
Rank 1
G S S asked on 01 Feb 2011, 10:48 PM
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

6 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 02 Feb 2011, 10:57 AM
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.
0
G S S
Top achievements
Rank 1
answered on 03 Feb 2011, 01:40 AM

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
0
Pero
Telerik team
answered on 03 Feb 2011, 04:37 PM
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.
0
Jack
Top achievements
Rank 2
answered on 19 May 2015, 01:03 PM

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

 Cheers,
Jon

0
Jack
Top achievements
Rank 2
answered on 18 Nov 2015, 10:12 AM

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

Cheers

Jack

0
Jack
Top achievements
Rank 2
answered on 18 Nov 2015, 11:38 AM

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
Tags
TagCloud
Asked by
G S S
Top achievements
Rank 1
Answers by
Pero
Telerik team
G S S
Top achievements
Rank 1
Jack
Top achievements
Rank 2
Share this question
or