Splitter control

Last Update: 9/26/2016

See Use splitter for basic usage and advanced samples.

Create a splitter

TypeScript

  import Controls = require("VSS/Controls");
  import Splitter = require("VSS/Controls/Splitter");

  // Create the splitter in a container element
  var splitter = Controls.create<Splitter.Splitter, Splitter.ISplitterOptions>(Splitter.Splitter, container, options);

JavaScript

  require(["VSS/Controls", "VSS/Controls/Splitter"], function(Controls, Splitter) {
      // Create the splitter in a container element
      var splitter = Controls.create(Splitter.Splitter, container, options);
  });

Options

     {
        initialSize: {number},
        fixedSide: {string},
        vertical: {boolean},
        collapsedLabel: {string},
        enableToggleButton: {boolean},
        minWidth: {number},
        maxWidth: {number}
    }
Option Type Default Notes
initialSize number Initial size of the grid in px.
fixedSide string left Specifies which side of the splitter is fixed (left or right).
vertical boolean true Specifies whether the split should be vertical or not.
collapsedLabel string Text displayed on splitter handle when toggle button is enabled and splitter is collapsed.
enableToggleButton boolean false Enables the toggle button which displays a button for expand/collapse.
minWidth number Sets the minimum width of the splitter's fixed side.
maxWidth number Sets the maximum width of the splitter's fixed side.

Methods

setMinWidth()

Sets the minimum width of the splitter's fixed side.

Returns

void

Parameters

  • minWidth: number. minimum number of pixels the fixed side will fill.

setMaxWidth()

Sets the maximum width of the splitter's fixed side.

Returns

void

Parameters

  • maxWidth: number. maximum number of pixels the fixed side will fill.

resize()

Resize the fixed side of the splitter to the specified size.

Returns

void

Parameters

  • newSize: any. New fixed side size in px.
  • suppressFireResize: boolean. Optional. Determines whether to suppress firing resize event or not.
  • useAnimation: boolean. Optional. Determines whether to use animation during resize or not.

expand()

Expands the splitter.

Returns

void

collapse()

Collapses the splitter.

Returns

void

isExpanded()

Specifies whether the splitter is expanded or not.

Returns

boolean

getFixedSidePixels()

Gets the fixed side size in px.

Returns

number

noSplit()

Disables the split.

Returns

void

Parameters

  • animate: boolean. Optional.

split()

Enables the split.

Returns

void

Parameters

  • animate: boolean. Optional. Determines split operation is animated or not (default false).
  • defaultExpandToPixels: number. Optional. Specified value used for split amount. If not specified default value is used.

vertical()

Changes split orientation to vertical.

Returns

void

horizontal()

Changes split orientation to horizontal.

Returns

void

setCollapsedLabel()

Sets the label that is shown when the splitter is collapsed

Returns

void

Parameters

  • labelText: string. Text displayed when the splitter is collapsed (null/empty for none)