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

Scripting API not working for Pane and SlidingPane

4 Answers 113 Views

Splitter

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

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

answered on 16 Jul 2010, 07:47 AM

default.zip

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

answered on 19 Jul 2010, 03:03 PM

scripterror.jpg

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.

Accepted

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