Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > RadSlidingZone ExpandDelay

• Ronny

  Posted on Feb 9, 2011 (permalink)

  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

  Reply

• Dobromir Dobromir

  Posted on Feb 10, 2011 (permalink)

  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.

  Reply


• Ronny

  Posted on Feb 15, 2011 (permalink)

  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

  Reply

• Dobromir Dobromir

  Posted on Feb 17, 2011 (permalink)

  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

  Vote for Telerik products at the Great Indian Developer Awards

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Splitter > RadSlidingZone ExpandDelay