RadSlidingZone ExpandDelay

4 posts, 0 answers
  1. Ronny
    Ronny avatar
    12 posts
    Member since:
    Apr 2008

    Posted 09 Feb 2011 Link to this post

    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
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 10 Feb 2011 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ronny
    Ronny avatar
    12 posts
    Member since:
    Apr 2008

    Posted 15 Feb 2011 Link to this post

    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 == nullreturn;
        if (movedX == null || movedY == nullreturn;

        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
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 17 Feb 2011 Link to this post

    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
Back to Top