Client-Side API

SlidingZone provides a flexible client-side API that allows you to change easily the configuration in the browser.

1. Getting the RadSlidingZone client-side object:
   

   		var slidingZone = <%= RadSlidingZone1.ClientID %>;
   		

2. Once you get the client-side object of RadSlidingZone, you can use the GetPaneById method to get the instance of a particular sliding pane. Example:

   		var slidingZone = <%= RadSlidingZone1.ClientID %>;
   		var pane = slidingZone.GetPaneById("RadPane1");
   		

   You can also get the collection of all panes in the slidingZone using the GetPanes method:

   		var slidingZone = <%= RadSlidingZone1.ClientID %>;
   		var panes = slidingZone.GetPanes(); // get the panes collection
   
   		// loop the the collection
   		for (var i=0; i < panes.length; i ++)
   		{
   			var paneObj = panes[i]; // get instance of the RadPane 
   		}
   		

3. Using the client-side API you can Dock/Undock, Expand/Collapse, Show/Hide, Resize sliding panes. Examples:

   			var slidingZone = <%= RadSlidingZone1.ClientID %>;
   			slidingZone.CollapsePane(paneID); // collapse the pane
   			slidingZone.ExpandPane(paneID); // expand the pane
   
   			slidingZone.DockPane(paneID); // dock the pane
   			slidingZone.UndockPane(paneID); // undock the pane
   
   			slidingZone.HidePaneTab(paneID); // hide the pane tab from the sliding zone
   			slidingZone.ShowPaneTab(paneID); // show the pane tab from the sliding zone
   
   			var pane = slidingZone.GetPaneById(paneId);
   			pane.SetWidth(100); // set the pane width to 100px
   			var paneWidth = pane.GetWidth(); // get the current width of the pane
   			pane.SetContent('this is the new content of the pane'); // change the pane content