RadScriptManagerProxy and user control

[Cedric]

Hi,

In my User Control I got a ScriptManagerProxy with a ScriptReference property in which I load a Javascript file.

 

<asp:ScriptManagerProxy ID="smp" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/myScript.js" />
    </Scripts>
</asp:ScriptManagerProxy>

This Javascript file contains this function:

 

function onNodeClicked(sender, args) {
    ...
}

Finally, in my User Control, I have a RadTreeView:

<telerik:RadTreeView ID="myTree" runat="server OnClientNodeClicked="onNodeClicked">
    ...
</telerik:RadTreeView>

This control is loaded dynamically in a aspx page. When I execute this, I receive this message:
                
                            Microsoft JScript runtime error: 'onNodeClicked' is undefined

What's wrong ?

 

 

 

 

[T. Tsonev]

Hi Cedric,

The script is probably getting registered after the control initialization clauses. Add the script above the TreeView itself using inline script tag

<script type="text/javascript" src='<%= ResolveUrl("~/Scripts/myScript.js") %>'></script>

I hope this helps.

Sincerely yours,
Tsvetomir Tsonev
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.

[Allen]

I apologize for surfacing an ancient thread.  Must be because I am ancient!  I am struggling with an old WebForms application using the UI for ASP.NET Ajax controls and I have a couple questions.  Please feel to reroute this if I am posting this in the wrong location!

1) RadScriptBlock.   These are a somewhat of a mystery.  Do they get folded into  a combined axd by the script manager, and if so, when in the page life cycle exactly does this happen?  Also, the documentation seems ambguous about including 'blocks' in a javascript function:  specifically, I often need to resolve a aspx page property e.g. myProperty from within a  script.  Example:

Javascript

var myProp = '<%= myPageProperty %>';

C#

 

[public string myPageProperty()

{

get {return hiddenfieldMyProp.Value;}

set {hiddenfieldMyProp.Value=value;

}

where hiddenfieldMyProp is defined as an asp hidden field on the page. 

So the only 'code block' here is the property value request.  Am I wasting my time?

or should it go into a RadCodeBlock

and if so, how do I ensure that the scripts in that RadCodeBlock are available to controls on the page?

So

<telerik:RadButton ID="RadButtonAdd" runat="server" CausesValidation="False" EnableBrowserButtonStyle="False" ButtonType="SkinnedButton"<br>                                                CssClass="std-button-64" ToolTip="Add one or several new photo files." OnClientClicking="onAddPhotosClientClicking"<br>                                                RenderMode="Lightweight"><br>                                                <ContentTemplate><br>                                                    <span class="flex flex-row items-center h-full w-full space-x-2 px-2"><br>                                                        <i class="fa fa-camera-retro fa-2x text-lg button-icon button-icon-purple font-bold align-middle p-0"></i><br>                                                        <span class="flex flex-row flex-row justify-center ml-1 text-sm font-bold">Add Photos</span><br>                                                    </span><br>                                                </ContentTemplate><br>                                            </telerik:RadButton>

(WTF happened with the formatting???)

3 - external js script files.   If these are loaded by the RadScriptManager in a PARENT form, can user controls on page use those functions?

I will stop there.  Might have more questions.  An example of an aspx with user controls and properly positioned script blocks and code blocks would be very helpful

 

 

 

 

[Peter Milchev]

Hello Allen,

Regardless of when a forum is submitted, it will be considered new if you encounter this scenario for the first time so it is okay to resurrect old threads sometimes. 

To the technical questions:

The <% %> tags seem to be evaluated between the PreRender and PreRenderComplete events.

Generally, the CodeBlock would not be needed if you are not using AjaxManager/AjaxPanel, but if you do, you might need to wrap the whole script in a RadCodeBlock.

Keep in mind that the said script will be rendered for each UserControl instance you have on the page, meaning if you add three UserControls one after the other, the value of the myProp variable will be the one from the last UserControl because that will override the values set by the previous UserControls. That means depending on your requirements, you might need to think of a way how to keep or access the values as if they are in the user control's scope.

Generally, if you are using a hidden field already, I would recommend using some DOM traversal to find the hidden field with JavaScript and use the value there. Here is a simple example:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CodeBlockUC.ascx.cs" Inherits="CodeBlockUC" %>
<div class="code-block-uc">

    <script>
        var myvalue = "<%= HiddenField1.Value %>";
     
    </script>

    <asp:HiddenField ID="HiddenField1" runat="server" />
    <telerik:RadButton runat="server" ID="RadButton1" Text="Call JavaScript function" AutoPostBack="false" OnClientClicked="OnClientClicked" />
    <script>
        function OnClientClicked(sender, args) {
            // https://api.jquery.com/closest/
            var userControlElement = $telerik.$(sender.get_element()).closest(".code-block-uc")[0];
            // .findElement from here https://docs.telerik.com/devtools/aspnet-ajax/controls/telerik-static-client-library
            var hiddenField = $telerik.findElement(userControlElement, "HiddenField1");
            var value = hiddenField.value;
            alert(value)
        }
    </script>
</div>

public partial class CodeBlockUC : System.Web.UI.UserControl
{
    protected void Page_PreRender(object sender, EventArgs e)
    {
        HiddenField1.Value = "Hidden field value for UC" + this.ID;
    }
}

 

Keep in mind that the OnClientClicked function will also be overridden by the last user control, but in this case, it is irrelevant because the implementation is relative to the rendered HTML and does not use hardcoded elements and IDs.

Regarding the external files, you cannot use the server-side tags there (e.g. <% %>) so it should not matter how you are loading the script as long it is loaded on the page. 

Basically, the UserControls concept is server-side only as the final result is one whole HTML page where everything is rendered. With that said, the elements and controls inside the user controls can access all the functions and variables loaded by a MasterPage or a simple page just as if all the content were loaded in a single .aspx page with no user controls.

Regards,
Peter Milchev
Progress Telerik