RadScriptBlock with external js file

8 posts, 0 answers
  1. John Swenson
    John Swenson avatar
    23 posts
    Member since:
    Jan 2010

    Posted 09 May 2012 Link to this post

    Hi,
    I have a custom control, let's say MyControl1.ascx
    Inside this control I have the following code:

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function ClearRadCombo(sender, eventArgs)
            {
                var mycombo = $find("<%= RadComboBox1.ClientID %>");
                mycombo.clearItems();
                mycombo.clearSelection();
            }
        </script>
    </telerik:RadScriptBlock>

    This works just well.

    Now I want to put all of the js code in a separate file, so I've changed the above code like this:

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript" src="../script/myscript.js">
        </script>
    </telerik:RadScriptBlock>

    I've registered the js file in the RadScriptManager on my MasterPage in this way:

    <asp:ScriptReference Path="~/script/myscript.js" />

    but it doesn't work anymore. I get a "object is null" error when the script calls the "clearItems" method, and "mycombo" is null, indeed.
    So, it's possible to use RadScriptBlock with an external js file? If yes, what's wrong with my code, please?

    Any help will be really appreciated.
    Thank you.
  2. John Swenson
    John Swenson avatar
    23 posts
    Member since:
    Jan 2010

    Posted 14 May 2012 Link to this post

    So no one has ever had this problem?
  3. ALEX
    ALEX avatar
    61 posts
    Member since:
    Feb 2011

    Posted 15 May 2012 Link to this post

    Hi John Swenson,

             Specially i'm not family with this control. I'm stay testing and using. After i found your case i tested at my site. Here is sample code. But i'm not tested at ascx.
    Aspx

    <head runat="server">
        <title></title>
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript" src="js/JScript.js">
            </script>               
        </telerik:RadScriptBlock>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Path="~/js/JScript.js"/>
                </Scripts>
            </asp:ScriptManager>
            <telerik:RadComboBox ID="RadComboBox1" runat="server">
                <Items>
                    <telerik:RadComboBoxItem runat="server" Text="1" Value="RadComboBoxItem1" />
                    <telerik:RadComboBoxItem runat="server" Text="2" Value="RadComboBoxItem2" />
                    <telerik:RadComboBoxItem runat="server" Text="3" Value="RadComboBoxItem3" />
                </Items>
            </telerik:RadComboBox>
            <br />
            <asp:Button runat="server" ID="d" OnClientClick="ShowDropDown();return false;" />       
        </div>
        </form>
    </body>
    </html>

    External Js

    function ShowDropDown() {
        var combo = $telerik.$("[id$='RadComboBox1']").attr("id");
        var mycombo = $find(combo);
        mycombo.showDropDown();
    }

    Hope this help.

    Regards,
    Alex
  4. John Swenson
    John Swenson avatar
    23 posts
    Member since:
    Jan 2010

    Posted 17 May 2012 Link to this post

    Hi Alex,
    thank you for your suggestion, it solved my problem!

    I've made the following modifications in order to adapt the code to my scenario (a custom control):

    1. put the<script>  tag in the page hosting my control, not in the control itself
    2. no need to nest this<script> tag inside aRadScriptBlock 

    Definitely, this code is the key :
    var combo = $telerik.$("[id$='RadComboBox1']").attr("id");

    I think your code is worth to be added to the Telerik KB ;-)

    Again, thank you.
    Best regards.

    P.S. Anyway, I was wondering if there are other ("official" ?) ways to achive the same result....
  5. Eyup
    Admin
    Eyup avatar
    4014 posts

    Posted 17 May 2012 Link to this post

    Hello John,

    I am glad you resolved the issue.

    Please note that you cannot use server-side expressions in external javascript files such as:
    $find("<%= RadComboBox1.ClientID %>");

    ASP.NET framework does not process external javascript files and does not parse the code blocks ( <%= ... %> syntax). Such blocks are parsed only in aspx/ascx files so what we can suggest is moving the javascript in the original aspx file or getting the client-side object of the combobox assigning it to a global javascript variable in the aspx using the <%= ... %> syntax and then passing it as a parameter to the external .js functions to get hold of the client-component of the control:
    <script type="text/javascript">      
        function OnItemSelected(sender, args)  {          
           var comboBox = $find("<%= RadComboBox1.ClientID %>");          
           PassComboBox(sender, args, comboBox);    
       }   
    </script>
    Now you can work with the RadComboBox object in your external JS file without error:
    function PassComboBox(sender, args, comboBox){
        var myComboBox = comboBox;
      }

    I hope this helps.

    Kind regards,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. ALEX
    ALEX avatar
    61 posts
    Member since:
    Feb 2011

    Posted 17 May 2012 Link to this post

    Hi Eyup and John Swenson,


            We can directly find the control without passing parameter , puting "(<% %>)" and "$telerik.$" at external js.
    Please see my sample code. But i not sure how does it work. Result is Ok without pass any parameter.

    Aspx
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
     
            <script type="text/javascript" src="js/JScript.js">
            </script>
     
        </telerik:RadScriptBlock>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                    <Scripts>
                        <asp:ScriptReference Path="~/js/JScript.js" />
                    </Scripts>
                </asp:ScriptManager>
                <telerik:RadComboBox ID="RadComboBox1" runat="server">
                    <Items>
                        <telerik:RadComboBoxItem runat="server" Text="1" Value="RadComboBoxItem1" />
                        <telerik:RadComboBoxItem runat="server" Text="2" Value="RadComboBoxItem2" />
                        <telerik:RadComboBoxItem runat="server" Text="3" Value="RadComboBoxItem3" />
                    </Items>
                </telerik:RadComboBox>
                <br />
                <asp:TextBox runat="server" ID="_txt"></asp:TextBox>
                <asp:Button runat="server" ID="_btnShowDropDown" OnClientClick="ShowDropDown();return false;" Text="ShowDropDown" /><br />
                <asp:Button runat="server" ID="_btnShowText" OnClientClick="ShowTextValue();return false;" Text="ShowText"/>
                <asp:Button runat="server" ID="_btnShowDropDownText" OnClientClick="ShowDropDownText();return false;" text="ShowDropDownText"/>
            </div>
        </form>
    </body>
    </html>

    External Js

    // JScript File
    // Using  Telerik JQuery
    function ShowDropDown() {
        var combo = $telerik.$("[id$='RadComboBox1']").attr("id");
        var mycombo = $find(combo);
        mycombo.showDropDown();
    }
    // Using JQuery
    function ShowTextValue() {
        var _itxt = $get("_txt");
        alert(_itxt.value);
    }
    function ShowDropDownText() {
        var mycombo = $find("RadComboBox1");
        mycombo.showDropDown();
        var _itxt = $get("_txt");
        alert(_itxt.value);
    }

     Someone can explain to me, i'll be appreciate.

    Regards,
    Alex
  7. Eyup
    Admin
    Eyup avatar
    4014 posts

    Posted 21 May 2012 Link to this post

    Hello Alex,

    Indeed, your approach is also a possibility. However, accessing controls that way can result in unwanted behavior in future if you decide to use the controls in Panels or some other containers.
    Basically, this is a general ASP.net issue and you could find more detailed information on various sources on the internet. For example:
    Access Controls in External JavaScript 1
     Access Controls in External JavaScript 1

    All the best,
    Eyup
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. ALEX
    ALEX avatar
    61 posts
    Member since:
    Feb 2011

    Posted 21 May 2012 Link to this post

    Hi Eyup,

              Thanks for your explain.

    Regards,
    Alex
Back to Top