Cancel OnClientBeforeUndock

[Marc]

Hi, I am using two RadSlidingPane with the mode with DockOpen="true". One of them an have an option inside with which this tab must stay open while the option is active. So I wrote code in OnClientBeforeUndock and call eventArgs.set_cancel(true) in this case. It works for the first user click on the other tab but if the very next click is again on the other tab, then the event is not triggered and the other tab content is shown.

I also tried to react to the OnClientBeforeExpand on the other tab but with this scenario the event is not triggered on the second click.

Also, when this happen, both tabs are highlighted to show they are selected while only one tab can be selected at a time!

Is it a bug? Is there a workaround or another way to force a tab to stay visible (maybe by disable other tabs but not by hiding them)?

Thanks

[Vessy]

Hi Mark,

I am not quite sure whether I understand the exact scenario correctly. If you want to cancel the "Undocking" of a specific sliding pane, you will need to use the OnClientUndocking event, which could be cancelled and so the SlidingPane would remain docked, e.g:

<telerik:RadSplitter ID="RadSplitter1" runat="server"
    Orientation="Vertical">
    <telerik:RadPane ID="RadPane1" runat="server" Scrolling="None" Width="22px">
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="22px" DockedPaneId="RadSlidingPane1"
            Height="100%">
            <telerik:RadSlidingPane ID="RadSlidingPane1" Title="Basic" runat="server" DockOnOpen="true" OnClientUndocking="OnClientUndocking" Width="100%" Height="100%">
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="RadSlidingPane2" Title="Advanced" runat="server" Width="100%"
                DockOnOpen="false" Height="100%">
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="RadSlidingPane3" Title="ID Search" runat="server" Width="100%"
                DockOnOpen="false" Height="100%">
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server" Height="100%" Width="82%" >
    </telerik:RadPane>
</telerik:RadSplitter>
<script type="text/javascript">
    function OnClientUndocking(pane, eventArgs) {
        eventArgs.set_cancel(true);
    }
</script>

if this is not the case, could you explain in mroe detailes what is the exact scenario you want to achieve? A sample project demonstrating the problem would be of great help in understanding in better.

Looking forward to hearing from you,
Veselina Raykova
Telerik

[Marc]

Hi, thanks for your response. I tried your solution in my case and I have the same behavior. Let me explain more in detail what I want...

I have 2 tabs (Values and Options) and in the Options tab I have a checkbox (Edit Mode). When this checkbox is checked, I want this tab still shown and only this tab. So if the user try to close it or switch to another one I want to cancel the action. Here is some code that show my problem with your solution:

<telerik:RadSplitter ID="splitterPage" runat="server" Width="800px" Height="500px" Orientation="Vertical">
    <telerik:RadPane ID="paneLeft" runat="server">
        <telerik:RadSplitter ID="splitterLeft" runat="server" Width="100%" Height="500px" Orientation="Horizontal">
            <telerik:RadPane ID="paneTop" runat="server" Height="205">
            </telerik:RadPane>
            <telerik:RadPane ID="paneBottom" Height="100%" runat="server">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
    <telerik:RadPane ID="paneSlidingZone" runat="server" Width="22">
        <telerik:RadSlidingZone ID="slidingZone" runat="server" Width="22" ClickToOpen="true" SlideDirection="Left">
            <telerik:RadSlidingPane ID="paneValues" Title="Values" runat="server" Width="200" EnableResize="False" Style="z-index: 2700" DockOnOpen="True">
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="paneOptions" Title="Options" runat="server" Width="200" EnableResize="False" Style="z-index: 2700" OnClientUndocking="OnClientUndocking" DockOnOpen="True">
                <telerik:RadButton ID="chkEditMode" runat="server" Text="Edit Mode" ButtonType="ToggleButton" ToggleType="CheckBox" Style="margin-top: 10px; margin-left: 6px" AutoPostBack="false" UseSubmitBehavior="false" />
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
</telerik:RadSplitter>
<script type="text/javascript">
    function OnClientUndocking(pane, eventArgs) {
        if ($find("<%= chkEditMode.ClientID %>").get_checked())
            eventArgs.set_cancel(true);
    }
</script>

What you will see is when the "Edit Mode" option is checked, then you will not be able to undock the tab by pressing the pin which is OK. If you click on the Values tab once you will have the same behavior which still good. But if the very next click is again on Values tab then both tabs will be highlighted and the content on Values is shown which is bad (see Image1). If the very next click is on the pin to undock Values, then the final layout is very bad (see Image2).

[Vessy]

Hello Marc,

I managed to reproduce the described behavior and you will need to attach the OnClientUpdocking handler to all SlidingPanes in order to avoid it:

<telerik:RadSplitter ID="splitterPage" runat="server" Width="800px" Height="500px" Skin="Metro"
    Orientation="Vertical">
    <telerik:RadPane ID="paneLeft" runat="server">
        <telerik:RadSplitter ID="splitterLeft" runat="server" Width="100%" Height="500px"
            Orientation="Horizontal">
            <telerik:RadPane ID="paneTop" runat="server" Height="205">
            </telerik:RadPane>
            <telerik:RadPane ID="paneBottom" Height="100%" runat="server">
            </telerik:RadPane>
        </telerik:RadSplitter>
    </telerik:RadPane>
    <telerik:RadPane ID="paneSlidingZone" runat="server" Width="22">
        <telerik:RadSlidingZone ID="slidingZone" runat="server" Width="22" ClickToOpen="true"
            SlideDirection="Left">
            <telerik:RadSlidingPane ID="paneValues" Title="Values" runat="server" Width="200"
                EnableResize="False" Style="z-index: 2700" DockOnOpen="True" OnClientUndocking="OnClientUndocking">
            </telerik:RadSlidingPane>
            <telerik:RadSlidingPane ID="paneOptions" Title="Options" runat="server" Width="200"
                EnableResize="False" Style="z-index: 2700" OnClientUndocking="OnClientUndocking"
                DockOnOpen="True">
                <telerik:RadButton ID="chkEditMode" runat="server" Text="Edit Mode" ButtonType="ToggleButton"
                    ToggleType="CheckBox" Style="margin-top: 10px; margin-left: 6px" AutoPostBack="false"
                    UseSubmitBehavior="false" />
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
</telerik:RadSplitter>
<script type="text/javascript">
    function OnClientUndocking(pane, eventArgs) {
        if ($find("<%= chkEditMode.ClientID %>").get_checked())
            eventArgs.set_cancel(true);
    }
</script>

I hope this helps.

Regards,
Veselina Raykova
Telerik