How to Disable RadSlidingZone in JavaScript?

6 posts, 1 answers
  1. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 22 Aug 2014 Link to this post

    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

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Aug 2014 in reply to Rob Link to this post

    Hi Rob,

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

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 25 Aug 2014 in reply to Shinu Link to this post

    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';

  5. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 25 Aug 2014 Link to this post

    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);
  6. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Aug 2014 in reply to Rob Link to this post

    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.
  7. Rob
    Rob avatar
    115 posts
    Member since:
    Aug 2012

    Posted 26 Aug 2014 in reply to Shinu Link to this post

    Your suggestions work well for me.

    Thank you, Shinu!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017