Splitter / Client-side API

Client-Side API

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

1. Getting the RadSlidingZone client-side object:

   	var slidingZone = $find("<%= 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 = $find("<%= 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 = $find("<%= 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 = $find("<%= 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.set_width(100); // set the pane width to 100px
   	var paneWidth = pane.get_width(); // get the current width of the pane
   	pane.setContent('this is the new content of the pane'); // change the pane content