Splitter / Client-side API

Client-Side API

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

1. Getting the RadSplitter client-side object:

   	var splitter = $find("<%= RadSplitter1.ClientID %>");
   

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

   	var splitter = $find("<%= RadSplitter1.ClientID %>");
   	var pane = splitter.getPaneById("RadPane1");
   

   You can also use the getPaneByIndex method to get an instance of a pane. Example:

   	var splitter = $find("<%= RadSplitter1.ClientID %>");
   	var pane = splitter.getPaneByIndex(1);
   

   You can also get the collection of all panes in the splitter using the getPanes method:

   	var splitter = $find("<%= RadSplitter1.ClientID %>");
   	var panes = splitter.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 collapse, expand, resize. Examples:

   	var splitter = $find("<%= RadSplitter1.ClientID %>");
   	var pane = splitter.getPaneById("RadPane1");
   	var isCollapseSuccess = pane.collapse(); // collapse this pane
   	var isExpandSuccess = pane.expand(pane); // expand this pane
   	pane.resize(100); // increase panes size with 100px
   

4. You can use the get_width, get_height methods to get the size of the splitter or panes. Example:

   	var splitter = $find("<%= RadSplitter1.ClientID %>");
   	var splitterWidth = splitter.get_width();
   	var splitterHeight = splitter.get_height();
   
   	var pane = splitter.getPaneById("RadPane1");
   	var paneWidth = pane.get_width();
   	var paneHeight = pane.get_height();