ASP.NET Splitter Documentation - Client Side

Vertical & Horizontal Splitter - Client Methods;
Vertical & Horizontal Splitter - Client Properties;
Vertical Splitter - Client Properties; Horizontal Splitter - Client Properties;

Vertical & Horizontal Splitter - Client Methods

Name Description
methodloadPage Loads URL inside panel container of the splitter.

loadPage(containerName, pageUrl)
  • containerName - Name of the splitter panel container.
    Available values are:
    · for vertical splitter - LeftHeader, LeftContent, LeftFooter, RightHeader, RightContent, RightFooter.
    · for horizontal splitter - TopHeader, TopContent, TopFooter, BottomHeader, BottomContent, BottomFooter.
  • pageUrl - Url of the page that will be loaded into the splitter panel container.
spl1.loadPage("LeftHeader", "leftHeader.html");
spl1.loadPage("LeftContent", "leftContent.html");
spl1.loadPage("LeftFooter", "leftFooter.html");
spl1.loadPage("RightHeader", "rightHeader.html");
spl1.loadPage("RightContent", "rightContent.html");
spl1.loadPage("RightFooter", "rightFooter.html");
spl1.loadPage("TopHeader", "topHeader.html");
spl1.loadPage("TopContent", "topContent.html");
spl1.loadPage("TopFooter", "topFooter.html");
spl1.loadPage("BottomHeader", "bottomHeader.html");
spl1.loadPage("BottomContent", "bottomContent.html");
spl1.loadPage("BottomFooter", "bottomFooter.html");

See also how to open URL on click.
methodRefresh Reloads the page loaded inside panel container of the splitter.
For loading a page inside a panel container you can use Url server property or loadPage client method.
Check also How to open URL in a panel tutorial.

Refresh(containerName, KeepScrollPosition)
  • containerName - Name of the splitter panel container.
    Available values are:
    · for vertical splitter - LeftHeader, LeftContent, LeftFooter, RightHeader, RightContent, RightFooter.
    · for horizontal splitter - TopHeader, TopContent, TopFooter, BottomHeader, BottomContent, BottomFooter.
  • KeepScrollPosition - When is true, the scroll bar position would stay the same after refresh.
    This property is available only if server property RememberScrollPosition is set to true.
spl1.Refresh("LeftHeader", true);
spl1.Refresh("LeftContent", true);
spl1.Refresh("LeftFooter", false);
spl1.Refresh("RightHeader", true);
spl1.Refresh("RightContent", false);
spl1.Refresh("RightFooter", false);
spl1.Refresh("TopHeader", false);
spl1.Refresh("TopContent", true);
spl1.Refresh("TopFooter", false);
spl1.Refresh("BottomHeader", true);
spl1.Refresh("BottomContent", true);
spl1.Refresh("BottomFooter", true);

See also Panel refresh example.
propertyGetDocument Get the document object inside the specified panel container.
If inside the panel container is not loaded another document using either Url or loadPage, or the page loaded is from another domain server, the method returns the owner document.

GetDocument(containerName)
  • containerName - Name of the splitter panel container.
    Available values are:
    · for vertical splitter - LeftHeader, LeftContent, LeftFooter, RightHeader, RightContent, RightFooter.
    · for horizontal splitter - TopHeader, TopContent, TopFooter, BottomHeader, BottomContent, BottomFooter.
spl1.GetDocument("LeftHeader");
spl1.GetDocument("LeftContent");
spl1.GetDocument("LeftFooter");
spl1.GetDocument("RightHeader");
spl1.GetDocument("RightContent");
spl1.GetDocument("RightFooter");
spl1.GetDocument("TopHeader");
spl1.GetDocument("TopContent");
spl1.GetDocument("TopFooter");
spl1.GetDocument("BottomHeader");
spl1.GetDocument("BottomContent");
spl1.GetDocument("BottomFooter");
propertyGetWindow Get the window object inside the specified panel container.
If inside the panel container is not loaded another document using either Url or loadPage, or the page loaded is from another domain server, the method returns the owner window.

GetWindow(containerName)
  • containerName - Name of the splitter panel container.
    Available values are:
    · for vertical splitter - LeftHeader, LeftContent, LeftFooter, RightHeader, RightContent, RightFooter.
    · for horizontal splitter - TopHeader, TopContent, TopFooter, BottomHeader, BottomContent, BottomFooter.
spl1.GetWindow("LeftHeader");
spl1.GetWindow("LeftContent");
spl1.GetWindow("LeftFooter");
spl1.GetWindow("RightHeader");
spl1.GetWindow("RightContent");
spl1.GetWindow("RightFooter");
spl1.GetWindow("TopHeader");
spl1.GetWindow("TopContent");
spl1.GetWindow("TopFooter");
spl1.GetWindow("BottomHeader");
spl1.GetWindow("BottomContent");
spl1.GetWindow("BottomFooter");
propertyCollapsePanel Collapse splitter panel.

CollpasePanel(panelName)
  • panelName - Name of the splitter panel.
    Available values are:
    · for vertical splitter - left, right.
    · for horizontal splitter - top, bottom.
spl1.CollapsePanel("left");
spl1.CollapsePanel("right");
spl1.CollapsePanel("top");
spl1.CollapsePanel("bottom");


View CollapsePanel example.
propertyExpandPanel Expand splitter panel if it was previously collapsed.

ExpandPanel(panelName)
  • panelName - Name of the splitter panel.
    Available values are:
    · for vertical splitter - left, right.
    · for horizontal splitter - top, bottom.
spl1.ExpandPanel("left");
spl1.ExpandPanel("right");
spl1.ExpandPanel("top");
spl1.ExpandPanel("bottom");


View ExpandPanel example.
propertyMoveSeparatorByValue Move the splitter separator by value in pixels.

MoveSeparatorByValue(panelName, value)
  • panelName - Name of the splitter panel.
    Available values are:
    · for vertical splitter - left, right.
    · for horizontal splitter - top, bottom.
  • value - Value in pixels to move the splitter separator.
spl1.MoveSeparatorByValue("left", 100);
spl1.MoveSeparatorByValue("right", 50);
spl1.MoveSeparatorByValue("top", 20);
spl1.MoveSeparatorByValue("bottom", 60);


View MoveSeparatorByValue example.
propertySynchronizeScroll Allow splitter panel content scroll synchronization.

SynchronizeScroll(isAvailable)
  • isAvailable - If set to true scroll for the splitter panel content will be synchronized.
    Available values are true, false.
spl1.SynchronizeScroll(true);
spl1.SynchronizeScroll(false);


View SynchronizeScroll example.
propertyGetPanelSize Get splitter panel container size.

GetPanelSize(containerName, sizeType)
  • containerName - Name of the splitter panel container.
    Available values are:
    · for vertical splitter - LeftHeader, LeftContent, LeftFooter, RightHeader, RightContent, RightFooter.
    · for horizontal splitter - TopHeader, TopContent, TopFooter, BottomHeader, BottomContent, BottomFooter.
  • sizeType - Available values are width, height.
spl1.GetPanelSize("LeftHeader", "width");
spl1.GetPanelSize("LeftContent", "width");
spl1.GetPanelSize("LeftFooter", "width");
spl1.GetPanelSize("RightHeader", "width");
spl1.GetPanelSize("RightContent", "width");
spl1.GetPanelSize("RightFooter", "width");
spl1.GetPanelSize("TopHeader", "width");
spl1.GetPanelSize("TopContent", "width");
spl1.GetPanelSize("TopFooter", "width");
spl1.GetPanelSize("BottomHeader", "width");
spl1.GetPanelSize("BottomContent", "width");
spl1.GetPanelSize("BottomFooter", "width");

Note: same for 'height'.

View GetPanelSize example.
propertyob_spl_isElementInsideSplitter Check if html element is inside splitter panels.
If true then return the splitter object, else null.

ob_spl_isElementInsideSplitter(element)
  • element - Html element.
ob_spl_isElementInsideSplitter(document.getElementById('myElement'));
propertyob_spl_isElementInsideSplitterContainer Check if html element is inside splitter panels.
If true then return the splitter panel object, else null.

ob_spl_isElementInsideSplitterContainer(element)
  • element - Html element.
ob_spl_isElementInsideSplitterContainer(document.getElementById('myElement'));
propertyob_spl_elementGetPosition Get html element positions inside splitter panel containers.
If the specified element is inside splitter panel container the method returns [left, top], else null.

ob_spl_elementGetPosition(element)
  • element - Html element.
ob_spl_elementGetPosition(document.getElementById('myElement'));

Vertical & Horizontal Splitter - Client Properties

Name Description
propertyPanelResizable Specifies wich panel of the splitter will be resizable in case of window resizing.
Accepted values are:
·left, right for vertical splitter.
·top, bottom for horizontal splitter.
Default value is:
·right for vertical splitter.
·bottom for horizontal splitter.

Vertical Splitter - Client Properties

Name Description
propertyWidthLeftMin Minimum width of the left panel.
propertyWidthLeftMax Maximum width of the left panel.
propertyWidthRightMin Minimum width of the right panel.
propertyWidthRightMax Maximum width of the right panel.
propertyLeftHeader Left header splitter element.
propertyLeftContent Left content splitter element.
propertyLeftFooter Left footer splitter element.
propertyRightHeader Right header splitter element.
propertyRightContent Right content splitter element.
propertyRightFooter Right footer splitter element.

Horizontal Splitter - Client Properties

Name Description
propertyHeightTopMin Minimum height of the top panel.
propertyHeightTopMax Maximum height of the top panel.
propertyHeightBottomMin Minimum height of the bottom panel.
propertyHeightBottomMax Maximum height of the bottom panel.
propertyTopHeader Top header splitter element.
propertyTopContent Top content splitter element.
propertyTopFooter Top footer splitter element.
propertyBottomHeader Bottom header splitter element.
propertyBottomContent Bottom content splitter element.
propertyBottomFooter Bottom footer splitter element.