Adding a button by the Dock button on a SlidingPane

5 posts, 1 answers
  1. Iggy
    Iggy avatar
    40 posts
    Member since:
    Jul 2005

    Posted 11 Sep 2009 Link to this post

    What I would like to do is add a Refresh icon next to the Dock/Undock button on a SlidingPane so a user could easily refresh the contents of the pane.  Is there any way to do this?
  3. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Sep 2009 Link to this post

    Hello Iggy,

    Yes, it is possible to add a custom icon with a custom command to the RdaSlidingPane. For your convenience I prepared and attached a sample demo for you. Let me know how it goes.

    Best wishes,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Iggy
    Iggy avatar
    40 posts
    Member since:
    Jul 2005

    Posted 17 Sep 2009 Link to this post

    Thanks, this works great.  I just had to make a few small changes. 
    I apply the classname that's used for the other icon TD's to the new TD (instead of applying separate styles) and then I also apply the pointer style cursor to the new icon.  Below is my code.

    function slidingZone_ClientLoaded(sender, args) {  
      var slidingPanes = sender.getPanes();  
      if (slidingPanes && slidingPanes.length > 0) {  
        for (var i = 0; i < slidingPanes.length; i++) {  
          var dockIcon = slidingPanes[i].getDockIconElement();  
          if (dockIcon) {  
            var iconsHolder = dockIcon.parentNode.parentNode;  
            var newTD = document.createElement('TD');  
            newTD.className = "rspSlideHeaderIconWrapper";  
            //newTD.style.paddingLeft = "5px";  
            //newTD.style.borderBottom = "solid 1px black";
                 iconsHolder.insertBefore(newTD, iconsHolder.childNodes[7]);  
            var newIcon = document.createElement('IMG');  
            newIcon.setAttribute('src', "Images/Toolbar/refresh.png");  
            newIcon.setAttribute('alt', 'refresh');  
            newIcon.style.cursor = "Pointer";  
            newTD.appendChild(newIcon);  
            newIcon.setAttribute('onclick', '_RefreshTree();');  
          }  
        }  
      }  
    } 
  7. Iggy
    Iggy avatar
    40 posts
    Member since:
    Jul 2005

    Posted 17 Sep 2009 Link to this post

    I found two errors, the above code doesn't work in IE. 
    First, I don't have all the icons displayed so when the following tries to run 
    iconsHolder.insertBefore(newTD, iconsHolder.childNodes[7]);   
    I receive an "Invalid Argument" error in IE (it worked fine in Firefox for some reason). 
    By changing the code to the following the icon displays correctly.
    iconsHolder.insertBefore(newTD, slidingPanes[i].getCollapseIconElement().parentNode);  
     

    Second, the onclick function doesn't execute in IE.  Apparently the setAttribute function doesn't work correctly with IE in certain situations.  By changing the setAttribute line to the following now everything looks & works correctly in FF & IE.
    //newIcon.setAttribute('onclick', '_RefreshTree();');  
    newIcon.onclick = _RefreshTree; 
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 22 Sep 2009 Link to this post

    Hi Iggy,

    I am glad you could solve the problems you have faced by yourself. Note, that my demo was just for demonstration purposes and it had to be used only as a start point for your implementation because as you understand I cannot make the fine - tuning when I do not have detailed enough information and source code of a particular setup.

    In case you need further assistance, do not hesitate to contact us again, I will be happy to help!

    Kind regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top