Telerik Forums / UI for ASP.NET AJAX Forum / ToolTip /

Clientevents of usercontrol in tooltip undefined?

Telerik UI for ASP.NET AJAX
Resources Buy Try

17 posts, 1 answers

Martine

6 posts

Member since:
Nov 2006

Posted 26 Sep 2008 Link to this post

I've searched all over for the solution to my problem but haven't been able to find it so I figure I must be overlooking something really simple ;-)

I've got a simple page containing one LinkButton and a RadToolTipManager (used instead of RadToolTip because in the real app there's multiple tooltips loaded on demand). The LinkButton triggers the ToolTip.

The tooltip contains a simple usercontrol, containing only one button. So far so good, tooltip opens just fine.

There is a client-script inside the usercontrol (OnClientClick for Button-control). The problem is that a javascript-error appears instead of the desired client-side behavior:

'ClientClick' is undefined.

ClientClick is defined in the user control, not in the parent page. How can I use client-scripting in usercontrols inside tooltip-templates?

Could you please point me in the right direction?

Kind regards, Martine.

ASPX:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI, Version=2008.2.826.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" 
        
                Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register Src="WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">  
        
                    </telerik:RadScriptManager> 
        
                    <br /> 
        
                    <div> 
        
                        <asp:LinkButton ID="LinkButton1" runat="server">Show ToolTip</asp:LinkButton><br /> 
        
                        <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" ManualClose="True" 
        
                            Modal="True" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate">  
        
                            <TargetControls> 
        
                                <telerik:ToolTipTargetControl IsClientID="False" TargetControlID="LinkButton1" Value="" /> 
        
                            </TargetControls> 
        
                        </telerik:RadToolTipManager> 
        
                        &nbsp;</div> 
        
                </form> 
        
            </body> 
        
            </html>

.cs:

    
            using System;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            public partial class _Default : System.Web.UI.Page   
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void RadToolTipManager1_AjaxUpdate(object sender, Telerik.Web.UI.ToolTipUpdateEventArgs e)  
        
                {  
        
                    WebUserControl UC = (WebUserControl)Page.LoadControl("WebUserControl.ascx");  
        
                    e.UpdatePanel.ContentTemplateContainer.Controls.Add(UC);  
        
                }  
        
            }

ASCX:

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %> 
        
            <%@ Register Assembly="Telerik.Web.UI, Version=2008.2.826.20, Culture=neutral, PublicKeyToken=121fae78165ba3d4" 
        
                Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <asp:Button ID="Button1" runat="server" OnClientClick="ClientClick" Text="Button in UserControl" /> 
        
            <script language="javascript" type="text/javascript">  
        
                function ClientClick(sender, args)   
        
                {  
        
                    Alert('Clicked!');  
        
                }  
        
            </script>

Answer

Svetlina Anati

Admin

2795 posts

Posted 30 Sep 2008 Link to this post

Hi Martine,

I examined your code and I noticed the following:

You have declared the javascript function in the user control and this approach is not the best one - if it is so, every time you add the control the script will be added to the page. This will make your page more heavy and these repeating scripts are not needed. I recommend to put the script on the main page instead of the user control. Furthermore, when you have a ScriptManager you should register the script in order to inform the manager about it, you cannot simply output it on the page.

The correct way to attach the function is with brackets because otherwise it will not get executed. Please, also note that you should return false in case you do not need a server handler. This being said, you should modify the button's markup in the following manner:

    
                <asp:Button ID="Button1" runat="server" OnClientClick="ClientClick();return false;" Text="Button in UserControl" />

Note, that JavaScript is case sensitive and in order to correctly call the built-in alert function it should not begin with a capital letter.

I applied the above explained modifications to your project and attached it to the thread.

Sincerely yours,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

ToolTipManagerClientEvents.zip

Nicolaï

160 posts

Member since:
Apr 2008

Posted 08 Jun 2009 Link to this post

Hello,

I have a similar project as described above.
Also realized I had to put the js code inside the "parent" page instead of the tooltiped usercontrol.
But the problem I am facing is: finding a control (linkbutton) inside the usercontrol from that (parent page) script.

Code is below and the bolded line is the part I struggle with: tried variations of the bold line, but unable to find the save button inside the uc..

<telerik:RadCodeBlock runat="server" ID="rcb1">
<script type="text/javascript">
function OnDateChange(dateInput, args)
{
var saveBtn=$get("<%=saveCompletedDateLink.ClientID %>");alert(saveBtn);
if (args.get_newDate() == null && args.get_oldDate() == null)
{
saveBtn.style.display="none";
}
else
{
saveBtn.style.display="block";
}
}
</script>
</telerik:RadCodeBlock>

(basically showing or hiding a save button until the selected date is valid)
Really hope you can help me out!
Posted here in forum instead of ticket, as this has probably been asked before and will probably be asked again.

Best regards,
Nicolai
Nicolaï

160 posts

Member since:
Apr 2008

Posted 08 Jun 2009 Link to this post

Follow-up:
with firefox, I selected the part and "view selection source".
==> var saveBtn=document.getElementById("ctl55_saveCompletedDateLink");

That seems to work, but it feels "dirty" using ctlXX_ ....
But it works... That's what counts I suppose..
Zeke Sheppard

32 posts

Member since:
Oct 2009

Posted 05 Feb 2010 Link to this post

Putting the javascript function on the parent page instead of the user control seems contrary to the object oriented fundament of encapsulation.

That being said, how can a javascript function be recognized on the user control?

Currently, I am having an issue where a client side event on a user control is firing, but producing the error '<function name> is undefined.

here's the code snippet;

<

telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<

script type="text/javascript">

function OnClientLoad(editor, args) {

var element = document.all ? editor.get_document().body : editor.get_document();

$telerik.addExternalHandler(element,

"blur", function(e) {

alert(

'You just clicked in the editor');

});

}

function

OnBlurNetWeight() {

window.alert(

'Here');

}

</

script>

</

telerik:RadCodeBlock>

<telerik:RadNumericTextBox ID="rntNetKilos" Width="85px" Runat="server" >

<ClientEvents OnBlur="OnBlurNetWeight" />

</telerik:RadNumericTextBox>

Produces a javascript error 'OnBlurNetWeight' is undefined.
Svetlina Anati
Admin

2795 posts

Posted 10 Feb 2010 Link to this post

Hello guys,

This problem is not directly related to RadControls but to the fact that MS AJAX does not parse scripts as explained below:

http://blogs.telerik.com/tervelpeykov/posts/08-10-20/ajax_using_ajax_to_load_a_usercontrol_that_has_javascript_declared_in_it.aspx

Since you are using the OnAjaxUpdate event of the tooltip manager this means that you are loading the user control with AJAX and you encounter the issue explained above.

Since this is general problem you can find many different approaches to solve it. What I suggest is to use code-behind to inject the script from the server in similar manner as explained below (simply register the block instead of executing on start up):

http://blogs.telerik.com/blogs/posts/09-05-05/executing_javascript_function_from_server-side_code.aspx

The approach with putting the script on the main page is also a valid one and different solution of getting IDs are also available on the net. You can for example use global js variables and initialize them ClientIDs by using script from the server, you can use hidden fields on the main page, reference them from the user control's code-behind and set the ClientID's in them so that you will be able to read them in js on the main page, etc.

All the best,
Svetlina
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
Zeke Sheppard

32 posts

Member since:
Oct 2009

Posted 17 Feb 2010 Link to this post

Following your example, after adding this call to the function to the control:

OnClientClick

="InternalCall();return false;"

And adding this script to the same .ascx

<

script type="text/javascript">

function

InternalCall()

{

alert(

"Javascript declared directly in the user control called form <%=Button1.ClientID %>");

}

</

script>

The control cannot be dynamically loaded since the following exception is raised;
error BC30456: 'InternalCall' is not a member of 'ASP.salesintent_si_usercontrols_salesintentpage_ascx'.

Curiously, it appears no one else responsding to the referenced thread had any success implementing these suggestions. Where is this breaking?
Zeke Sheppard

32 posts

Member since:
Oct 2009

Posted 17 Feb 2010 Link to this post

Update: after adding the global handler to the .aspx container, the following error is displayed;
rgs.get_response()._xmlHttpRequest has no properties.

In viewing the thread

http://blogs.telerik.com/tervelpeykov/posts/08-10-20/ajax_using_ajax_to_load_a_usercontrol_that_has_javascript_declared_in_it.aspx

it appears others are experiencing this issue, but there is no solution given.

Why is this breaking?
Svetlina Anati
Admin

2795 posts

Posted 22 Feb 2010 Link to this post

Hi guys,

This problem occurs when other RadControls are used in the loaded user control and we are aware of it. there is a workaround but the workaround itself as well as the solution is pretty complex and also uneffective for this particular case (it is handy in simple scenarios where the user control is not diplicated as many times on the pages). I strongly recommend to better implement the solution I have already suggested in my previous post which for your convenience I pasted below:

Since this is general problem you can find many different approaches to solve it. What I suggest is to use code-behind to inject the script from the server in similar manner as explained below (simply register the block instead of executing on start up):

http://blogs.telerik.com/blogs/posts/09-05-05/executing_javascript_function_from_server-side_code.aspx

The approach with putting the script on the main page is also a valid one and different solution of getting IDs are also available on the net. You can for example use global js variables and initialize them ClientIDs by using script from the server, you can use hidden fields on the main page, reference them from the user control's code-behind and set the ClientID's in them so that you will be able to read them in js on the main page, etc.

Kind regards,
Svetlina
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.
Zeke Sheppard

32 posts

Member since:
Oct 2009

Posted 22 Feb 2010 Link to this post

Interesting...this thread is over a year and a half old and you are finally revealing the fact that your controls are breaking this functionality. Incredible.

Since you have know about this issue for some time, and currently don't have the a) desire, b) time, or c) skill to resolve, is the a planned fix in the future?
Svetlina Anati
Admin

2795 posts

Posted 22 Feb 2010 Link to this post

Hello Zeke,

The workaround in question (http://blogs.telerik.com/tervelpeykov/posts/08-10-20/ajax_using_ajax_to_load_a_usercontrol_that_has_javascript_declared_in_it.aspx) shows possible solutions to solve a general MS AJAX problem. Please note, that we do not claim that this workaround works in all cases - that is why in your exact case we suggested to use either registering scripts from code-behind or declaring them on the main page. Have you tried these suggestions?

All the best,
Svetlina
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.
Zeke Sheppard

32 posts

Member since:
Oct 2009

Posted 22 Feb 2010 Link to this post

If you actually look at the thread you are referencing ( http://blogs.telerik.com/tervelpeykov/posts/08-10-20/ajax_using_ajax_to_load_a_usercontrol_that_has_javascript_declared_in_it.aspx ) you will see that this did not appear to work for anyone, including me, on 2/17.

To quote;

'Getting args.get_response()._xmlHttpRequest has no properties. Any resolution to this?'

Again, no workable solution given, and no response from your group after the initial post.
Georgi Tunev
Admin

7207 posts
Posted 25 Feb 2010 Link to this post

Hi Zeke,

The blogs on our side are community resort and although we monitor the comments in them, sometimes we miss to reply all comments - unfortunately this is what happened with that blog post for which we apologize. I will ask Svetlina to post a reply there as as soon as possible.

As for the problem itself, we prepared a small sample that shows the approach that we suggest you to use in such scenario - I hope it will be of help.

Regards,
Georgi Tunev
Senior Support
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.

zeke-demo.zip
Zeke Sheppard

32 posts

Member since:
Oct 2009

Posted 26 Feb 2010 Link to this post

Any chance of actually keeping client side code on the client side only instead of adding it from the server side?
Zeke Sheppard

32 posts

Member since:
Oct 2009

Posted 01 Mar 2010 Link to this post

The issue at hand regarding this (and several other) thread is getting Javascript to run on dynamically loaded user controls. Your sample does not address this issue and, per your group, only addresses the most simple implementations. To date, a satisfactory solution has yet to be provided, despite the fact that this appears to be an open issue on your site for nearly two years.

Nice job, guys!
Zeke Sheppard

32 posts

Member since:
Oct 2009

Posted 03 Mar 2010 Link to this post

Telerik,

The 6 line demo code you recently submitted will not compile. Brilliant!

This is coming from Senior Support Telerik team ?

Perhaps we have discovered the problem.....
Svetlina Anati
Admin

2795 posts
Posted 04 Mar 2010 Link to this post

Hi Zeke,

I apologize for missing a reference to another user control on the main page - in order to run the demo you should remove the following line:

<%@ Register Src="ProductDetails.ascx" TagName="ProductDetails" TagPrefix="uc1" %>

(it was left from another sample - I apologize for the omission).

I am not completely sure however what exactly you mean by "The issue at hand regarding this (and several other) thread is getting Javascript to run on dynamically loaded user controls" - the demo I provided deals exactly with a dynamically loaded user control - it is loaded by using the LoadControl method as follows:

e.UpdatePanel.ContentTemplateContainer.Controls.Add(Page.LoadControl("~/UserControlWithScript.ascx"));

Furthermore no matter whether you load the control dynamically or static, this have nothing to do with the registering the script since it is registered in the load event and it will fire in both cases.

I attached a fully working demo along with a trial dll and Web.config and the deleted reference. If you still experience problems, it will be best to open a support ticket and to send us a sample project that reproduces your exact setup - this way we will provide you with the most appropriate solution for your scenario.

Regards,
Svetlina
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.

zeke-demo.zip

Clientevents of usercontrol in tooltip undefined?

Martine

Svetlina Anati

Nicolaï

Nicolaï

Zeke Sheppard

Svetlina Anati

Zeke Sheppard

Zeke Sheppard

Svetlina Anati

Zeke Sheppard

Svetlina Anati

Zeke Sheppard

Georgi Tunev

Zeke Sheppard

Zeke Sheppard

Zeke Sheppard

Svetlina Anati