Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

How to Disable RadSlidingZone in JavaScript?

5 Answers 83 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Rob
Top achievements
Rank 1
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>
 
<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

Sort by
0
Shinu
Top achievements
Rank 2
answered on 25 Aug 2014, 05:43 AM
Hi Rob,

Please have a look into this forum thread which discuss about the same scenario.

Thanks,
Shinu.
0
Rob
Top achievements
Rank 1
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';

0
Rob
Top achievements
Rank 1
answered on 25 Aug 2014, 03:08 PM
This code works, but please advise if this is the best way to do it?

​var paneTab = pnl.getTabContainer();
paneTab.children.RAD_SLIDING_PANE_TEXT_ctl00_cpB_slPane1.className = 'rspPaneTabText rspRotatedTabText rspPaneTabTextDisabled';
$clearHandlers(paneTab);
0
Accepted
Shinu
Top achievements
Rank 2
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.
0
Rob
Top achievements
Rank 1
answered on 26 Aug 2014, 01:07 PM
Your suggestions work well for me.

Thank you, Shinu!
Tags
Splitter
Asked by
Rob
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Rob
Top achievements
Rank 1
Share this question
or