This is a migrated thread and some comments may be shown as answers.

Scripting API not working for Pane and SlidingPane

4 Answers 61 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Adam Heeg
Top achievements
Rank 1
Adam Heeg asked on 13 Jul 2010, 09:14 PM
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>

4 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 16 Jul 2010, 07:47 AM
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
0
Adam Heeg
Top achievements
Rank 1
answered on 19 Jul 2010, 03:03 PM
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.
0
Accepted
Svetlina Anati
Telerik team
answered on 22 Jul 2010, 10:00 AM
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
0
Adam Heeg
Top achievements
Rank 1
answered on 22 Jul 2010, 05:17 PM
That worked, thank you Svetlina !
Tags
Splitter
Asked by
Adam Heeg
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Adam Heeg
Top achievements
Rank 1
Share this question
or