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

How to Disable RadSlidingZone in JavaScript?

5 Answers 157 Views

Splitter

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

Rob asked on 22 Aug 2014, 07:37 PM

I have just recently upgraded from Q3 2011 to Q1 2014 of RadControls and some client side code has stopped working. What I have are 3 RadSlidingZones within a RadSplitter/RadPane. What I'm trying to do is disable the first RadSlidingzone "slPane1" by default in JavaScript at the bottom of the page. This code used to work before the upgrade. I'm also using IE11, .Net Framework 4.5, & VS2012. Please advise.

Thanks,
Rob

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestRadSlidingZone.aspx.vb" Inherits="TestRadSlidingZone" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

<asp:ScriptReference Path="~/Script/jQuery/jquery-ui-1.8.17.custom.min.js" />

</Scripts>

</telerik:RadScriptManager>

<div>

<telerik:RadSplitter ID="RadSplitter1" runat="server">

<telerik:RadPane runat="server" ID="pNav" Height="100%">

<div id="DivSLZone" runat="server" style="float: left; clear: none; width: 22px; height: 100%;">

<telerik:RadSlidingZone ID="slZone" runat="server" SlideDirection="Right" ClickToOpen="true" Width="22">

<telerik:RadSlidingPane ID="slPane1" Title="sPane 1" runat="server" Width="275"

EnableDock="false" Height="100%">

<div runat="server" id="divSlPane1">

</div>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="slPane2" Title="sPane 2" runat="server" Width="275"

EnableDock="false" Height="100%">

<div runat="server" id="divSlPane2">

</div>

</telerik:RadSlidingPane>

<telerik:RadSlidingPane ID="slPane3" Title="sPane 3" runat="server" Width="275"

EnableDock="false" Height="100%">

<div runat="server" id="divSlPane3">

</div>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</div>

<div style="height: 100%;">

<asp:PlaceHolder runat="server" ID="phLeft" />

</div>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" ID="sBar1" CollapseMode="Forward" EnableResize="true" />

<telerik:RadPane runat="server" ID="pContent" Scrolling="none" BackColor="white">

</telerik:RadPane>

</telerik:RadSplitter>

</div>

</form>

</body>

</html>

<telerik:RadCodeBlock runat="server" ID="rcb">

<script type="text/javascript">

$(document).ready(function () {

var pnl = $find('<%= slPane1.ClientID%>');

if (pnl != null)

pnl._tabContainer.disabled = true;

});

</script>

</telerik:RadCodeBlock

Partial Class TestRadSlidingZone

Inherits System.Web.UI.Page

End Class

5 Answers, 1 is accepted

answered on 25 Aug 2014, 02:34 PM

Thank you for your reply, Shinu. That thread definitely disables the sliding zone, but it does not look disabled. All I need now is to change the color of the text to gray in the same javascript function if possible. Setting the className or style.color properties do not work. Please advise.



.RadSplitter_Web20 .rspPaneTabContainer .rspPaneTabTextDisabled {
 color: #CCCCCC !important;
}

var paneTab = pnl.getTabContainer();

paneTab.children.RAD_SLIDING_PANE_TEXT_ctl00_cpB_slPane1.className = 'rspPaneTabTextDisabled rspRotatedTabText';

paneTab.children.RAD_SLIDING_PANE_TEXT_ctl00_cpB_slPane1.style.color = '#CCCCCC !important';

Accepted

answered on 26 Aug 2014, 06:18 AM

Hi Rob,

As a suggestion try to use the 'item()' method of children instead of 'RAD_SLIDING_PANE_TEXT_ctl00_cpB_slPane1'. Because 'RAD_SLIDING_PANE_TEXT_ctl00_cpB_slPane1' will get only affect that particular Pane, in order to get affect the changes for all the Pane try to use 'item()' method. Then one more suggestion is instead of 'className' you can use 'add' and 'remove' method. Using these method you can add or remove the class dynamically based on the scenario. Please try the modified JavaScript which works fine at my end.

JavaScript:

...

var

paneTab = sPane.getTabContainer();

paneTab.children.item().classList.add("rspPaneTabTextDisabled"

);

...

CSS:

.rspPaneTabTextDisabled

{

color: Red !important;

}

Thanks,
Shinu.