RadSlidingZone ExpandDelay

[Ronny]

Hello,

I have a SlidingZone which load content on demand. The SlidingPanes open, when the user moves the mouse over a tab. In common the user do not hit the right tab and moves the mouse to the desired tab. Now every tab, the user moves over, is opening and starting a ajax-request for loading its content. So my question, how can I configure a delay before the expanding is started?

<telerik:RadPane ID="RightPane" runat="server" Width="22px" Scrolling="None">
    <telerik:RadSlidingZone ID="SlidingZone1" runat="server" Width="22px" SlideDirection="Left"
        ClickToOpen="false" >                        
        <telerik:RadSlidingPane ID="RadSlidingPane2" Title="Lokal" ToolTip="Lokale Gruppen"
            runat="server" Width="355px" IconUrl="/images/folder.png" OnClientExpanded="LoadLocalGroup" EnableDock="false">
            <asp:Panel ID="PanelLocal" runat="server" Height="100%">
                <twoeyes:LocalGroupAllocation ID="alloc_LocalGroup" runat="server" />
            </asp:Panel>
        </telerik:RadSlidingPane>
        <telerik:RadSlidingPane ID="RadSlidingPane3" Title="Global" ToolTip="Globale Gruppen"
            runat="server" Width="355px" IconUrl="/images/folder_blue.png" OnClientExpanded="LoadGlobalGroup" EnableDock="false">
            <asp:Panel ID="PanelGlobal" runat="server" Height="100%">
                <twoeyes:GlobalGroupAllocation ID="alloc_GlobalGroup" runat="server" />
            </asp:Panel>
        </telerik:RadSlidingPane>
    </telerik:RadSlidingZone>
</telerik:RadPane>

Thanks and greetings,
Ronny

[Dobromir]

Hi Ronny,

In order to delay the expanding of a sliding pane you need to assign a handler to the ClientBeforeExpand event and cancel it, then call it manually using RadSlidingZone's expandPane() method, e.g.:

<telerik:RadSplitter ID="RadSplitter1" runat="server">
    <telerik:RadPane ID="RadPane1" runat="server">
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">
            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Pane1" OnClientBeforeExpand="OnClientBeforeExpand">
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
</telerik:RadSplitter>

<script type="text/javascript">
    var isCanceled = false;

    function OnClientBeforeExpand(slidingPane, args)
    {
        if (!isCanceled)
        {
            args.set_cancel(true);

            setTimeout(function ()
            {
                isCanceled = true;
                var slidingZone = $find("<%=RadSlidingZone1.ClientID %>");
                slidingZone.expandPane(slidingPane.get_id());
            }, 1000);
        }
    }
</script>

I hope this helps.

Kind regards,
Dobromir
the Telerik team

[Ronny]

Hi Dobromir,

your solution does not work. I've implemented a workaround. I would like to see a ExpandDelay as a future feature.

var isCanceled = false;
var currentPane = null;
var movedX = null;
var movedY = null;
 
document.onmousemove = mouseMovedEvent;
 
function mouseMovedEvent() {
    movedX = window.event.x;
    movedY = window.event.y;
}
 
function OnClientBeforeExpand(slidingPane, args) {
    if (slidingPane != currentPane) {
        args.set_cancel(true);
 
        if (currentPane == null) {
            var delegate = function () { checkOpening(slidingPane); }
 
            setTimeout(delegate, 500);
        }
    }
}
 
function checkOpening(slidingPane) {
    if (slidingPane == null) return;
    if (movedX == null || movedY == null) return;
 
    var posX = movedX;
    var posY = movedY + $("#header").height(); // Fix for IE
 
    var pane = $("#RAD_SLIDING_PANE_TAB_" + slidingPane.get_id());
 
    if (pane.offset().left > posX) return;
    if (pane.offset().left + pane.width() < posX) return;
    if (pane.offset().top > posY) return;
    if (pane.offset().top + pane.height() < posY) return;
 
    var slidingZone = $find("<%=this.SlidingZone1.ClientID %>");
    currentPane = slidingPane;
    if (slidingZone != null) slidingZone.expandPane(slidingPane.get_id());
    currentPane = null;
}

Greetings,
Ronny

[Dobromir]

Hi Ronny,

You are correct. After reviewing the sample that I have provided in my previous answer I noticed that I have missed resetting the flag variable (isCanceled). You need to reset its value to false after the expand is complete (in the OnClientExpanded event). Here is the complete code:

<telerik:RadSplitter ID="RadSplitter1" runat="server">
    <telerik:RadPane ID="RadPane1" runat="server">
        <telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">
            <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Title="Pane1" OnClientBeforeExpand="OnClientBeforeExpand" OnClientExpanded="OnClientExpanded">
            </telerik:RadSlidingPane>
        </telerik:RadSlidingZone>
    </telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
</telerik:RadSplitter>

<script type="text/javascript">
    var isCanceled = false;

    function OnClientBeforeExpand(slidingPane, args)
    {
        if (!isCanceled)
        {
            args.set_cancel(true);

            setTimeout(function ()
            {
                isCanceled = true;
                var slidingZone = $find("<%=RadSlidingZone1.ClientID %>");
                slidingZone.expandPane(slidingPane.get_id());
            }, 1000);
        }
    }

    function OnClientExpanded(slidingPane, args)
    {
        isCanceled = false;
    }
</script>

Also, thank you for sharing your solution with the community. Would you mind prepare a fully working sample project and post it as a CodeLibrary?

In addition, I have logged this as a feature request and we will consider the implementation of such feature to the RadSplitter control.

Kind regards,
Dobromir
the Telerik team