Scripting API not working for Pane and SlidingPane

[Adam Heeg]

I copied and pasted the demo code to do various tasks on the sliding panes because I could not get it to work.

Every thing I try gives me a javascript error saying method is not supported.  Below is your code which I used.  My guess is that my version and the version used in the Demo are different, but I can't find what version that demo is for.    My Telerik.Web.UI is version 2009.3.1314.35

Any help would be appreciated.

<script type="text/javascript">

                /***********************************************
                            Sliding Zone examples
                ***********************************************/
                function GetZoneState ()
                {
                    var slidingZone = $find("SlidingZone1");
                    var zoneState = slidingZone.get_clientState();
                    alert(zoneState);
                }

                /***********************************************
                            Pane examples
                ***********************************************/

                function ToggleEnableResize(paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var pane = slidingZone.getPaneById(paneID);

                    if (!pane) return;
                    pane.set_enableResize(!pane.get_enableResize());
                    slidingZone.collapsePane(pane.get_id());
                    slidingZone.expandPane(pane.get_id());

                }

                function ToggleEnableDock(paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var pane = slidingZone.getPaneById(paneID);

                    if (!pane) return;

                    pane.set_enableDock(!pane.get_enableDock());
                    slidingZone.undockPane(pane.get_id());
                    slidingZone.collapsePane(pane.get_id());
                    slidingZone.expandPane(pane.get_id());

                }

                function GetPaneState(paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var pane = slidingZone.getPaneById(paneID);

                    if (!pane) return;

                    var paneState = pane.get_clientState();
                    alert(paneState);
                }

                function ToggleExpandPane(paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var expandedPaneId = slidingZone.get_expandedPaneId();

                    if (expandedPaneId == null || expandedPaneId != paneID)
                    {
                        slidingZone.expandPane(paneID);
                    }
                    else
                    {
                        slidingZone.collapsePane(paneID);
                    }
                }

                function ToggleDockPane(paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var dockedPaneId = slidingZone.get_dockedPaneId();

                    if (dockedPaneId == null || dockedPaneId != paneID)
                    {
                     slidingZone.collapsePane(paneID);
                        slidingZone.dockPane(paneID);
                    }
                    else
                    {
                        slidingZone.undockPane(paneID);
                    }
                }

                function TogglePaneTabVisibility(paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var pane = slidingZone.getPaneById(paneID);
                    if (pane.isTabDisplayed())
                    {
                        pane.hideTab();
                    }
                    else
                    {
                        pane.showTab();
                    }
                }

                function ChangePaneContent (paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var pane = slidingZone.getPaneById(paneID);
                    if (!pane) return;

                    pane.setContent('This is the NEW pane content ...');
                    slidingZone.collapsePane(pane.get_id());
                    slidingZone.expandPane(pane.get_id());
                }

                function ChangePaneWidth (paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var pane = slidingZone.getPaneById(paneID);
                    if (!pane) return;

                    var newWidth = (pane.get_width() == 200) ? 100 : 200 ;

                    pane.set_width(newWidth); // set the width
                    slidingZone.collapsePane(pane.get_id());
                    slidingZone.expandPane(pane.get_id());
                }

                function ToggleClickToOpen ()
                {
                    var slidingZone = $find("SlidingZone1");
                    slidingZone.set_clickToOpen(!slidingZone.get_clickToOpen());
                    alert("'ClickToOpen' property set to [" + slidingZone.get_clickToOpen() + "]");
                }

                    function ToggleDockOnOpen (paneID)
                {
                    var slidingZone = $find("SlidingZone1");
                    var pane = slidingZone.getPaneById(paneID);
                    if (!pane) return;
                    pane.set_dockOnOpen(!pane.get_dockOnOpen());
                    alert("'DockOpen' property set to [" + pane.get_dockOnOpen() + "]");
                }

    </script>

[Svetlina Anati]

Hi Adam Heeg,

I tested the provided script with the demo markup with the 2009.3.1314 version of RadControls but I could not reproduce the problem. The only thing I can assume that might be causing the issue is that your splitter, panes, etc for some reason have other IDs set - if so, you should also change the IDs when referencing the corresponding client objects.

I attached my test demo for your reference - if you reproduce the problem there, please provide detailed reproduction steps and explanations and if not - share fully runnable reproduction code which I can examine and debug and I will do my best to help.

On a side note, the online demos which are uploaded on our site are always with the latest version of RadControls. If you are using a previous version and you are not sure whether a feature exists in it you should check our release notes to see when it was implemented:


http://www.telerik.com/products/aspnet-ajax/whats-new/release-history.aspx

Best wishes,
Svetlina
the Telerik team

[Adam Heeg]

I've been using the code pretty straight forward.  I guess there is something little I am missing.  Here is my code and the error I am getting from the javascript.  The error is always thrown when I call a method on the Pane object.  Because of this I believe the call: slidingZone.getPaneByID(paneID); is returning null.  Then the methods on the pane object are throwing the error...

<telerik:RadSplitter
   ID="RadSplitter2"
   runat="server"
   Height="82px"
   Width="100%"
   Orientation="Horizontal"
   VisibleDuringInit="false"
   Skin="EPSS"
   EnableEmbeddedSkins="false"
>
      <telerik:RadPane
         ID="TopPane"
         runat="server"
         Scrolling="None"
         Locked="false"
         Height="24px"
         Width="100%"
      >
            <telerik:RadSlidingZone
               ID="szCR"
               runat="server"
               Width="100%"
               SlideDirection="Bottom"
               SlideDuration="100"
               ClickToOpen="true"
            >
                  <telerik:RadSlidingPane
                     ID="SlidingPane"
                     Title="Supersystem Selection"
                     runat="server"
                     Width="0"
                     Height="200px"
                     style="z-index:10000"
                     Scrolling="None"
                  >
                     <asp:CheckBoxList
                         ID="cblSupersystems"
                         runat="server"
                         RepeatColumns="3"
                         CellSpacing="10"
                         AppendDataBoundItems="true"
                     >
                        <asp:ListItem Text="Select All" Value="-100" />
                     </asp:CheckBoxList>
                  <asp:Button
                     ID="btnSelect"
                     runat="server"
                     Text="Select"
                     onclick="btnSelect_Click"
                  />
                  </telerik:RadSlidingPane>
            </telerik:RadSlidingZone>
      </telerik:RadPane>
      <telerik:RadPane ID="linkspane" runat="server" Width="100" Height="400">
         <table cellpadding="5">
            <tr>
               <td valign="top">
                  <a href="javascript:ToggleExpandPane('SlidingPane')">View Supersystems</a>
               </td>
               <td valign="top">
                  <a href="javascript:TogglePaneTabVisibility('SlidingPane')">View Collapsed tab</a>
               </td>
            </tr>
         </table>

      </telerik:RadPane>
   </telerik:RadSplitter>

The above code is in a usercontrol.  Below is the javascript, amost exactly what you have on the Demo's.  The only difference are the object names, which do match.

    <script type="text/javascript">
function TogglePaneTabVisibility(paneID)
        {
            var slidingZone = $find("szCR");
            var pane = slidingZone.getPaneById(paneID);
            if (pane.isTabDisplayed())
            {
                pane.hideTab();
            }
            else
            {
                pane.showTab();
            }
        }
        function ToggleExpandPane(paneID)
        {
            var slidingZone = $find("szCR");
            var expandedPaneId = slidingZone.get_expandedPaneId();

            if (expandedPaneId == null || expandedPaneId != paneID)
            {
                slidingZone.expandPane(paneID);
            }
            else
            {
                slidingZone.collapsePane(paneID);
            }
        }
    </script>

Any help is appreciated.

[Svetlina Anati]

Hi Adam Heeg,

I tested the provided code and I was able to reproduce the problem. However, it comes from the fact that you are using a user control and the user control is a Naming Container and thus it changes the ClientIDs of the controls. This is general knowledge and it is not directly related to RadControls - if you remove the splitter and you put e.g a standard Button and you try to reference it as document.getElementById('btnID') you will get the very same result. More information about this is available on the net, e.g below:

http://msdn.microsoft.com/en-us/library/system.web.ui.control.namingcontainer.aspx

There are different solutions - hard-coding the actual clientID, evaluating it on the server, etc. The solution I suggest is to use code block to evaluate the actual IDs as show below:

<%@  Control Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script type="text/javascript">
    function TogglePaneTabVisibility(paneID)
    {
        var slidingZone = $find("<%=szCR.ClientID %>");
        var pane = slidingZone.getPaneById(paneID);
        if (pane.isTabDisplayed())
        {
            pane.hideTab();
        }
        else
        {
            pane.showTab();
        }
    }
    function ToggleExpandPane(paneID)
    {
        var slidingZone = $find("<%=szCR.ClientID %>");
        var expandedPaneId = slidingZone.get_expandedPaneId();

        if (expandedPaneId == null || expandedPaneId != paneID)
        {
            slidingZone.expandPane(paneID);
        }
        else
        {
            slidingZone.collapsePane(paneID);
        }
    }
</script>

<asp:scriptmanager id="mng" runat="server">
    </asp:scriptmanager>
<telerik:RadSplitter ID="RadSplitter2" runat="server" Height="82px" Width="100%"
    Orientation="Horizontal" VisibleDuringInit="false" Skin="EPSS" EnableEmbeddedSkins="false">
    <telerik:RadPane ID="TopPane" runat="server" Scrolling="None" Locked="false" Height="24px"
        Width="100%">
        <telerik:RadSlidingZone ID="szCR" runat="server" Width="100%" SlideDirection="Bottom"
            SlideDuration="100" ClickToOpen="true">
            <telerik:RadSlidingPane ID="SlidingPane" Title="Supersystem Selection" runat="server"
                Width="0" Height="200px" Style="z-index: 10000" Scrolling="None">
                <asp:checkboxlist id="cblSupersystems" runat="server" repeatcolumns="3" cellspacing="10"
                    appenddatabounditems="true">
                        <asp:ListItem Text="Select All" Value="-100" />
                    </asp:checkboxlist>
                <asp:button id="btnSelect" runat="server" text="Select" aonclick="btnSelect_Click" />
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane ID="linkspane" runat="server" Width="100" Height="400">
        <table cellpadding="5">
            <tr>
                <td valign="top">
                    <a href="javascript:ToggleExpandPane('<%=SlidingPane.ClientID %>')">View Supersystems</a>
                </td>
                <td valign="top">
                    <a href="javascript:TogglePaneTabVisibility('<%=SlidingPane.ClientID %>')">View Collapsed
                        tab</a>
                </td>
            </tr>
        </table>
    </telerik:RadPane>
</telerik:RadSplitter>

I hope that my reply is helpful, let me know how it goes.

Best wishes,
Svetlina
the Telerik team

[Adam Heeg]

That worked, thank you Svetlina !