Adding a button by the Dock button on a SlidingPane

[Iggy]

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?

[Svetlina Anati]

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.

[Iggy]

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();');

}

}

}

}

[Iggy]

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;

[Svetlina Anati]

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.