Ignite UI™ API Documentation

ui.igSplitter

Overview
Options
Events
Methods
Theming

The splitter is a widget based on jQuery UI that manages layout into two panels with split bar and provides the end user with a rich interaction functionality including the ability to expand/collapse panel, and resize panels via split bar.

Code Sample

        <!doctype html>
        <html>
        <head>
            <!-- jQuery Core -->
            <script src="js/jquery.js" type="text/javascript"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js" type="text/javascript"></script>
            <!-- Infragistics Loader Script -->
            <script src="js/infragistics.loader.js" type="text/javascript"></script>
            <!-- Infragistics Loader Initialization -->
            <script type="text/javascript">
                $.ig.loader({
                    scriptPath: "js/",
                    cssPath: "css/",
                    resources: "igSplitter"
                });
        
                $.ig.loader(function () {
                    $("#splitter").igSplitter({
                        height: "500px",
                        width: "700px",
                        panels: [
                            { size: "300px", min: "250px", max: "350px", collapsible: true },
                            { collapsible: true }
                        ]
                    });
                });
            </script>
        </head>
        <body>
            <div id="splitter">
                <div>First Panel</div>
                <div>Second Panel</div>
            </div>
        </body>
        </html>

Related Samples

dragDelta

Type:: number
Default:: 3

Specifies drag delta of the split bar. In order to start dragging "move", the mouse has to be moved specific distance from its original position.

Code Sample

 
                    // Initialize
                    $('.selector').igSplitter({
                        dragDelta: 6
                    });

                    // Get
                    var delta = $('.selector').igSplitter("option", "dragDelta");

height

Type:: enumeration
Default:: null

Gets/Sets the height of the container.

Members

null
Type:object
will fit the tree inside its parent container, if no other widths are defined.

string
The height width can be set in pixels (px) and percentage (%).
number
The height width can be set as a number in pixels.

Code Sample

 
                    // Initialize
                    $('.selector').igSplitter({
                        height: "400px"
                    });
                    // Get
                    var height = $('.selector').igSplitter("option", "height");
                    // Set
                    $('.selector').igSplitter("option", "height", "400px");

orientation

Type:: enumeration
Default:: vertical

Specifies the orientation of the splitter.

Members

vertical
Type:string
horizontal
Type:string

Code Sample

 
                    // Initialize
                    $('.selector').igSplitter({
                        orientation: "horizontal"
                    });
                    // Get
                    var height = $('.selector').igSplitter("option", "orientation");
                    // Set
                    $('.selector').igSplitter("option", "orientation", "horizontal");

panels

Type:: array
Default:: []
Elements Type:: object

Array of objects options that specify the panels settings. The panels are no more than two. Settings are specified via enumeration.

Code Sample

 
                    $("#splitter").igSplitter({
                        panels: [
                            {size: "50%", min: "40%", max: "55%", collapsed: true, collapsible: true},
                            {collapsible: true}
                        ]
                    });

                    // Get
                    var panels = $(".selector").igSplitter("option", "panels");
                    panels[0].size;

collapsed

Type:: bool
Default:: false

Gets whether the panel is initially collapsed.

Code Sample

 
                            // Initialize
                            $('.selector').igSplitter({
                                panels: [{
                                    collapsed: true
                                }]
                            });

                            // Get
                            var panels = $(".selector").igSplitter("option", "panels");
                            panels[0].collapsed;

collapsible

Type:: bool
Default:: false

Gets whether the panel can be collapsed.

Code Sample

 
                            // Initialize
                            $('.selector').igSplitter({
                                panels: [{
                                    collapsible: true
                                }]
                            });

                            // Get
                            var panels = $(".selector").igSplitter("option", "panels");
                            panels[0].collapsible;

max

Type:: enumeration
Default:: null

Gets the maximum size that the panel can have.

Code Sample

 
                            // Initialize
                            $('.selector').igSplitter({
                                panels: [{
                                    max: "600px"
                                }]
                            });
                            // Get
                            var panels = $(".selector").igSplitter("option", "panels");
                            panels[0].max;

min

Type:: enumeration
Default:: null

Gets the minimum size that the panel can have.

Code Sample

 
                            // Initialize
                            $('.selector').igSplitter({
                                panels: [{
                                    min: "200px"
                                }]
                            });
                            // Get
                            var panels = $(".selector").igSplitter("option", "panels");
                            panels[0].min;

resizable

Type:: bool
Default:: false

Gets whether the panel can be resized.

Code Sample

 
                            // Initialize
                            $('.selector').igSplitter({
                                panels: [{
                                    resizable: true
                                }]
                            });

                            // Get
                            var panels = $(".selector").igSplitter("option", "panels");
                            panels[0].resizable;

size

Type:: enumeration
Default:: null

Gets the size of the panel.

Code Sample

 
                            // Initialize
                            $('.selector').igSplitter({
                                panels: [{
                                    size: "300px"
                                }]
                            });
                            // Get
                            var panels = $(".selector").igSplitter("option", "panels");
                            panels[0].size;

resizeOtherSplitters

Type:: bool
Default:: true

Specifies whether the other splitters on the page will be resized as this splitter resizes.

Code Sample

 
                    // Initialize
                    $('.selector').igSplitter({
                        resizeOtherSplitters: false
                    });

                    // Get
                    var resizeSplitters = $('.selector').igSplitter("option", "resizeOtherSplitters");

width

Type:: enumeration
Default:: null

Gets/Sets the width of the container.

Members

null
Type:object
will stretch to fit data, if no other widths are defined.

string
The widget width can be set in pixels (px) and percentage (%).
number
The widget width can be set as a number in pixels.

Code Sample

 
                    // Initialize
                    $('.selector').igSplitter({
                        width: "500px"
                    });
                    // Get
                    var width = $('.selector').igSplitter("option", "width");
                    // Set
                    $('.selector').igSplitter("option", "width", "500px");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

collapsed

Cancellable:: false

Fired after collapsing is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.
Use ui.index to get an index of collapsed panel.

Code Sample

 
                    // Bind
                    $(document).delegate(".selector", "igsplittercollapsed", function (evt, ui) {
                        // reference to igSplitter
                        ui.owner;
                        // index of the collapsed panel
                        ui.index;
                    });

                    // Initialize
                    $(".selector").igSplitter({
                        collapsed: function(evt, ui) {...}
                    });

expanded

Cancellable:: false

Fired after expanding is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.
Use ui.index to get an index of expanded panel.

Code Sample

 
                    // Bind
                    $(document).delegate(".selector", "igsplitterexpanded", function (evt, ui) {
                        // reference to igSplitter
                        ui.owner;
                        // index of the expanded panel
                        ui.index;
                    });

                    // Initialize
                    $(".selector").igSplitter({
                        expanded: function(evt, ui) {...}
                    });

layoutRefreshed

Cancellable:: false

Fired after the panels are refreshed because of browser"s resizing.

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

 
                    // Bind
                    $(document).delegate(".selector", "igsplitterlayoutrefreshed", function (evt, ui) {
                        // reference to igSplitter
                        ui.owner;
                    });

                    // Initialize
                    $(".selector").igSplitter({
                        layoutRefreshed: function(evt, ui) {...}
                    });

layoutRefreshing

Cancellable:: true

Fired before the panels are refreshed because of browser"s resizing.

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

 
                    // Bind
                    $(document).delegate(".selector", "igsplitterlayoutrefreshing", function (evt, ui) {
                        // reference to igSplitter
                        ui.owner;
                    });

                    // Initialize
                    $(".selector").igSplitter({
                        layoutRefreshing: function(evt, ui) {...}
                    });

resizeEnded

Cancellable:: false

Fired after split bar move is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

 
                    // Bind
                    $(document).delegate(".selector", "igsplitterresizeended", function (evt, ui) {
                        // reference to igSplitter
                        ui.owner;
                    });

                    // Initialize
                    $(".selector").igSplitter({
                        resizeEnded: function(evt, ui) {...}
                    });

resizeStarted

Cancellable:: false

Fired before split bar move is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

 
                    // Bind
                    $(document).delegate(".selector", "igsplitterresizestarted", function (evt, ui) {
                        // reference to igSplitter
                        ui.owner;
                    });

                    // Initialize
                    $(".selector").igSplitter({
                        resizeStarted: function(evt, ui) {...}
                    });

resizing

Cancellable:: true

Fired while split bar move is performed

Function takes arguments evt and ui.
Use ui.owner to get a reference to the splitter instance.

Code Sample

 
                    // Bind
                    $(document).delegate(".selector", "igsplitterresizing", function (evt, ui) {
                        // reference to igSplitter
                        ui.owner;
                    });

                    // Initialize
                    $(".selector").igSplitter({
                        resizing: function(evt, ui) {...}
                    });

Show Details

collapseAt

.igSplitter( "collapseAt", index:object );
Collapse the specified panel.
- index
- Type:object
- Specifies the index of the panel to collapse.
Code Sample
```
 
                    $(".selector").igSplitter("collapseAt", 0);
                     
```

destroy

.igSplitter( "destroy" );

Destroys the igSplitter widget.

Code Sample

 
                $(".selector").igSplitter("destroy");

expandAt

.igSplitter( "expandAt", index:object );
Expand the specified panel by index.
- index
- Type:object
- Specifies the index of the panel to expand.
Code Sample
```
 
                    $(".selector").igSplitter("expandAt", 1);
                     
```
firstPanel

.igSplitter( "firstPanel" );

Return Type:

object

Return Type Description:

Returns the jQuery object of the first panel element.
Retrieves the jQuery element of the first panel.
Code Sample
```
 
                var panel = $(".selector").igSplitter("firstPanel");
                 
```
refreshLayout

.igSplitter( "refreshLayout" );
Refresh splitter layout, use this method to re-render the splitter if some changes to the layout are applied.
Code Sample
```
 
                $(".selector").igSplitter("refreshLayout");
                 
```
secondPanel

.igSplitter( "secondPanel" );

Return Type:

object

Return Type Description:

Returns the jQuery object of the second panel element.
Retrieves the jQuery element of the second panel.
Code Sample
```
 
                var panel = $(".selector").igSplitter("secondPanel");
                 
```
setFirstPanelSize

.igSplitter( "setFirstPanelSize", size:object );
You can set new size of the first panel after the splitter is rendered.
- size
- Type:object
- Specifies the new size of the first panel.
Code Sample
```
 
                $(".selector").igSplitter("setFirstPanelSize", 100);
                 
```
setSecondPanelSize

.igSplitter( "setSecondPanelSize", size:object );
You can set new size of the second panel after the splitter is rendered.
- size
- Type:object
- Specifies the new size of the second panel.
Code Sample
```
 
                $(".selector").igSplitter("setSecondPanelSize", 100);
                 
```
widget

.igSplitter( "widget" );

Return Type:

object

Return Type Description:

Returns the element that represents this widget.
Returns the element that represents this widget.
Code Sample
```
 
                var widget = $(".selector").igSplitter("widget");
                 
```

ui-igsplitter-splitbar

Class applied to the split bar in the splitter.
ui-igsplitter-splitbar-focus ui-state-focus

Classes defining the focus state style of the split bar.
ui-igsplitter-splitbar-collapsed

Class defining the collapsed state style of the split bar.
ui-igsplitter-splitbar-hover ui-state-hover

Classes defining the hover state style of the split bar.
ui-igsplitter-splitbar-invalid

Class defining the invalid state style of the split bar.
ui-igsplitter-splitbar-default ui-state-default

Classes defining the default state style of the split bar.
ui-state-default

Class defining the default state style of the button.
ui-igsplitter-collapse-button-hover ui-state-hover

Classes defining the hover state style of the button.
ui-igsplitter-collapse-button-pressed

Class defining the pressed state style of the button.
ui-igsplitter-collapse-single-button

Class applied to a button in the split bar when it is single.
ui-igsplitter-collapse-button-horizontal-left

Class applied to the left horizontal collapse button in the split bar when it is collapsed.
ui-icon ui-icon-triangle-1-s

Class defining the right collapsed button icon in horizontal orientation.
ui-igsplitter-collapse-button-horizontal-left

Class applied to the left horizontal collapse button in the split bar when it is expanded.
ui-icon ui-icon-triangle-1-n

Class defining the left expanded button icon in horizontal orientation.
ui-igsplitter-collapse-button-horizontal-right

Class applied to the right horizontal collapse button in the split bar when it is collapsed.
ui-icon ui-icon-triangle-1-n

Class defining the right collapsed button icon in horizontal orientation.
ui-igsplitter-collapse-button-horizontal-right

Class applied to the right horizontal collapse button in the split bar when it is expanded.
ui-icon ui-icon-triangle-1-s

Class defining the right expanded button icon in horizontal orientation.
ui-igsplitter-panel-horizontal ui-widget-content

Classes applied to the horizontal panel in the splitter.
ui-igsplitter-no-scroll

Classes disabling the panel scrolling while width is zero.
ui-igsplitter-splitbar-resize-handler

Class applied to the resize handler in the split bar.
ui-igsplitter-splitbar-resize-handler-inner

Class applied to the inner resize handler in the split bar.
ui-igsplitter ui-widget ui-widget-content

Classes applied to the top container element.
ui-igsplitter-collapse-button-vertical-left

Class applied to the left vertical collapse button in the split bar when it is collapsed.
ui-icon ui-icon-triangle-1-e

Class defining the left collapsed button icon in vertical orientation.
ui-igsplitter-collapse-button-vertical-left

Class applied to the left vertical collapse button in the split bar when it is expanded.
ui-icon ui-icon-triangle-1-w

Classes defining the left expanded collapse button icon in vertical orientation.
ui-igsplitter-collapse-button-vertical-right

Class applied to the right vertical button in the split bar when it is collapsed.
ui-icon ui-icon-triangle-1-w

Class defining the right collapsed button icon in vertical orientation.
ui-igsplitter-collapse-button-vertical-right

Class applied to the right vertical collapse button in the split bar when it is expanded.
ui-icon ui-icon-triangle-1-e

Class defining the right expanded button icon in vertical orientation.
ui-igsplitter-panel-vertical ui-widget-content

Classes applied to the vertical panel in the splitter.

Ignite UI | Samples

ui.igSplitter

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

dragDelta

Code Sample

height

Members

Code Sample

orientation

Members

Code Sample

panels

Code Sample

collapsed

Code Sample

collapsible

Code Sample

max

Code Sample

min

Code Sample

resizable

Code Sample

size

Code Sample

resizeOtherSplitters

Code Sample

width

Members

Code Sample

collapsed

Code Sample

expanded

Code Sample

layoutRefreshed

Code Sample

layoutRefreshing

Code Sample

resizeEnded

Code Sample

resizeStarted

Code Sample

resizing

Code Sample

collapseAt

Code Sample

destroy

Code Sample

expandAt

Code Sample

firstPanel

Code Sample

refreshLayout

Code Sample

secondPanel

Code Sample

setFirstPanelSize

Code Sample

setSecondPanelSize

Code Sample

widget

Code Sample

ui-igsplitter-splitbar

ui-igsplitter-splitbar-focus ui-state-focus

ui-igsplitter-splitbar-collapsed

ui-igsplitter-splitbar-hover ui-state-hover

ui-igsplitter-splitbar-invalid

ui-igsplitter-splitbar-default ui-state-default

ui-state-default

ui-igsplitter-collapse-button-hover ui-state-hover

ui-igsplitter-collapse-button-pressed

ui-igsplitter-collapse-single-button

ui-igsplitter-collapse-button-horizontal-left

ui-icon ui-icon-triangle-1-s

ui-igsplitter-collapse-button-horizontal-left

ui-icon ui-icon-triangle-1-n