Strange Msg: "Microsoft JScript runtime error: 'radSlidingPane_BeforeExpand' is undefined"

[Robert]

I've purchased and implemented the 2010.Q3 controls.  Everything seems to be working fine in my project except for one thing:

I've implemented a RadSlidingPane in this fashion in a User Control:

<asp:Panel ID="panelMain" runat="server" style="padding-top:10px"><br>  <telerik:RadSplitter ID="radSplitter" runat="server" LiveResize="false" Height="449" OnClientLoaded="radSplitter_Load"><br>    <telerik:RadPane ID="radPaneLeft" runat="server" Scrolling="None"><br>      <telerik:RadSlidingZone ID="radSlidingZone" runat="server" Width="22" Height="0" ClickToOpen="true" DockedPaneId="radSlidingPane"><br>        <telerik:RadSlidingPane ID="radSlidingPane" runat="server" Width="240" BackColor="#F0F8FF" CssClass="slidingPane" TabView="TextAndImage" IconUrl="~/Images/hierarchy.gif" <br>                                DockOnOpen="true" OnClientBeforeExpand="radSlidingPane_BeforeExpand" OnClientUndocked="radSlidingPane_Undocked"><br>          <asp:Panel ID="panelTree" runat="server" Width="90%" Height="400px" BorderColor="DarkGray" BorderStyle="Groove" BorderWidth="1" style="margin-left:10px; margin-top:10px"><br>            <asp:PlaceHolder ID="placeHolderHierarchy" runat="server" /><br>          </asp:Panel><br>        </telerik:RadSlidingPane><br>      </telerik:RadSlidingZone><br>    </telerik:RadPane>

But when my code tries to load the user control, I get this error message:

Microsoft JScript runtime error: 'radSlidingPane_BeforeExpand' is undefined

I assure you that this Javascript function does exist!  A further clue is that if I remove OnClientBeforeExpand="radSlidingPane_BeforeExpand" then I get an error informing me that 'radSlidingPane_Undocked' is undefined .  It's as if these Javascript functions are somehow not yet loaded at the time they're needed.

What's even more frustrating is that all of this code used to work perfectly!  But clearly I've changed something [somewhere] and only now am discovering that this bug has arisen.

I'm hoping that I've given you enough info to help me pinpoint what the issue is here.  Any help you could provide would be much appreciated!

Sincerely,

Robert Werner
Vancouver, BC

[Tsvetie]

Hello Robert Werner,
I suppose you are loading the user control on the page as a result of an AJAX request and that you have declared the JavaScript functions in the user control. In case I am not mistaken, you should be able to fix the problem with the information in the following blog post:
http://blogs.telerik.com/tervelpeykov/posts/08-10-20/ajax_using_ajax_to_load_a_usercontrol_that_has_javascript_declared_in_it.aspx

Please note, that in case you have defined a JS function in a user control, that function will be output on the page for every instance of that user control. And as a result, calling the function will result in calling the function from the last instance.

Regards,
Tsvetie
the Telerik team

[Robert]

Tsvetie,

Thank you for that link.  I don't claim to understand everything in there but it sounds like it's not a good idea to include Javascript in any user control that may be loaded/unloaded.  Such is definitely the case with one module in my current project.  There's a large rectangular space in it where any one of about a dozen user controls can be loaded at any given time.  This design pattern makes complete sense and provides enormous benefits so I'm not going to change it.  But I have taken to removing all Javascript any of these users controls requires and moving it to an external .js file.

On that note, this past weekend I wrote your support team, pointing out some aberrations in your online documentation.  Among other things, have you noticed that ALL of your client-side examples involve embedded ASP.net controls?  For example, take a look here: http://www.telerik.com/help/aspnet-ajax/splitter_clientsidebasics.html  That all works fine but what if the developer doesn't want any Javascript mixed with their layout code.  What if s/he wants the code in an external .js file?  Since embedded ASP.net control references can't be included there, what to do then?

Through much trial & error, I was able to create external Javascript functions, assisted with jQuery, to perform the necessary manipulation.  Here's an example:

  // This code uses a little trick to ensure that the header of the sliding frame initially reads "Rates:".<br>  // If it wasn't present then the text would be converted into the long hierarchy path and look silly.<br>  function radSlidingPane_Docked(sender, eventArgs) {<br>    var slidingZone = $find($('table[id$=_radSlidingZone]')[0].id);<br>    var slidingPane = slidingZone.getPanes()[0];<br><br>    // This clears the Title property (and thus the vertical text displayed when the pane is collapsed)<br>    slidingPane.set_title("");  <br><br>    // These next two lines explicitly set the title in the title bar of the sliding pane to "Rates:"<br>    var titleContainer = slidingPane.getSlidingContainerTitle();<br>    titleContainer.innerHTML = "Rates:";<br>  }<br>

Let me suggest here, as I did in my e-mail to your company, that you should consider including alternative examples that don't use embedded ASP.net control references.

[Dobromir]

Hi Robert,

Thank you for the suggestion, we will consider providing such examples within our documentation, but please note that such solutions are very scenario specific and I do not think there can be a general case example.

I have reviewed the provided code, the approach taken to get reference to the RadSlidingZone is a good one. However, most of the RadControls's client-side objects do offer functionality to provide relation between them and their child controls.

Best wishes,
Dobromir
the Telerik team

[Robert]

Dobromir,

Here's an overview of the layout of the RadSplitter and associated controls:

  <telerik:RadSplitter>
    <telerik:RadPane>
      <telerik:RadSlidingZone>
        <telerik:RadSlidingPane>

        </telerik:RadSlidingPane>
      </telerik:RadSlidingZone>
    </telerik:RadPane>
  </telerik:RadSplitter>

You wrote: "However, most of the RadControls's client-side objects do offer functionality to provide relation between them and their child controls."

I thought so too.  From the Splitter one can very easily get the Pane.  But from the Pane how does one get the SlidingZone?  I carefully examined this page and could find no answer to this question: http://www.telerik.com/help/aspnet-ajax/splitter_clientsideradpane.html   This is why I was forced to revert to jQuery to get it.

Interested in your thoughts,

Robert

[Dobromir]

Hi Robert,

At present, you can get reference to the sliding zone inside a RadSlidingPane's client-side event handler using the get_parent() method, e.g.:

function radSlidingPane_Docked(sender, eventArgs)
{
    var slidingZone = sender.get_parent();

    alert(slidingZone.get_id());
}

At this point, RadPane or RadSplitter client-side objects does not offer a client-side functionality to get reference to a child RadSlidingZone. I will bring this issue to the attention of the developers of RadSplitter and we will consider implementing such functionality to the client-side API.

Regards,
Dobromir
the Telerik team