Scripting API not working for Pane and SlidingPane

5 posts, 1 answers
  1. Adam Heeg
    Adam Heeg avatar
    19 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2010 Link to this post

    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>
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 16 Jul 2010 Link to this post

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam Heeg
    Adam Heeg avatar
    19 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2010 Link to this post

    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.
  5. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 Jul 2010 Link to this post

    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
    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
  6. Adam Heeg
    Adam Heeg avatar
    19 posts
    Member since:
    Jul 2012

    Posted 22 Jul 2010 Link to this post

    That worked, thank you Svetlina !
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017