jqxDockingLayout API Reference

Name Type Default

contextMenu Boolean false

(Requires jqxmenu.js.)

Sets or gets wheter a custom context menu will appear when certain elements of the widget are right-clicked.

Code example

Set the contextMenu property.

$('#jqxDockingLayout').jqxDockingLayout({ contextMenu : true });

Get the contextMenu property.

var contextMenu = $('#jqxDockingLayout').jqxDockingLayout('contextMenu');

Try it: contextMenu is set to true

height Number/String null

Sets or gets the docking layout's height.

Code examples

Set the height property.

$("#jqxDockingLayout").jqxDockingLayout({ height: 800 });

Get the height property.

var height = $('#jqxDockingLayout').jqxDockingLayout('height');

Try it: height is set to 800

layout Array []

Sets or gets the layout. This property determines the position of the docking layout elements and their characteristics. The first member of the layout array should always be an item of type 'layoutGroup'.

Each object in the layout array can have the following properties, with some restrictions based on the type :

type. Possible values:
- 'layoutGroup' - container for other groups. It has no visual features. The root item is always of this type.
- 'tabbedGroup' - a group that contains layoutPanels. It is represented by a jqxWindow-like panel with a bottom-aligned jqxRibbon inside.
- 'documentGroup' - a group that contains documentPanels. It is represented by a top-aligned jqxRibbon.
- 'autoHideGroup' - a group that contains layoutPanels. It is represented by a jqxRibbon with mode: 'popup'. Each ribbon item has a jqxWindow-like panel in its content. This group has to be either the first or the last child item of its parent layoutGroup.
- 'layoutPanel' - a panel that can be inserted in a tabbedGroup or autoHideGroup. When it is in a tabbedGroup it is represented by a ribbon item and in an autoHideGroup - by a jqxWindow-like panel inside a ribbon item.
- 'documentPanel' - a panel that can be inserted in a documentGroup. It is represented by a ribbon item.
- 'floatGroup' - a floating group that can contain a tabbedGroup or a layoutPanel. It is represented by a jqxWindow. Initial floatGroups have to be defined after the root layoutGroup in the layout array.
alignment - sets the alignment of an autoHideGroup. Possible values:
- 'left'
- 'right'
- 'top'
- 'bottom'
allowClose - applicable to tabbedGroups, floatGroups, layoutPanels and documentPanels. If set to false, the group/panel cannot be closed.
allowPin - applicable only to tabbedGroups. If set to false, the group cannot be pinned.
allowUnpin - applicable only to autoHideGroups. If set to false, the group cannot be unpinned.
contentContainer - indicates which HTML element has the content of the panel. The required value is the value of an existing HTML element's data-container attribute. N/A to groups.
height - sets the height of a group (N/A to panels). Used only if the parent group's orientation is 'vertical' or for floatGroups. The heights of all such groups have to be set either in pixels or percents (not a mix of both).
initContent - a callback function to be called when a panel is opened for the first time. Useful for initializing widgets in panels. N/A to groups.
minHeight - sets the minimumn height (in pixels) of a group which is vertically aligned within its parent group. Disregards the value of the minGroupHeight property.
minWidth - sets the minimumn width (in pixels) of a group which is horizontally aligned within its parent group. Disregards the value of the minGroupWidth property.
orientation - orients child items either horizontally or vertically. Applicable only to layoutGroups. Possible values:
- 'horizontal'
- 'vertical'
pinnedHeight - sets what the height of a tabbedGroup will be after it is pinned.
pinnedWidth - sets what the width of a tabbedGroup will be after it is pinned.
popupContentSize - sets the size of the content part of an autoHideGroup's pop-up. Applicable to autoHideGroups and tabbedGroups (in this case, the property takes effect after a tabbedGroup is pinned).
position - sets the initial position of a floatGroup. The position property is an object with the following properties:
- x
- y
selected - sets whether a panel is initially selected. N/A to groups.
title - sets the title of a panel. Represented by the corresponding ribbon item's title. N/A to groups.
unpinnedHeight - sets what the height of an autoHideGroup will be after it is unpinned.
unpinnedWidth - sets what the width of an autoHideGroup will be after it is unpinned.
width - sets the width of a group (N/A to panels). Used only if the parent group's orientation is 'horizontal' or for floatGroups. The widths of all such groups have to be set either in pixels or percents (not a mix of both).
items - an array of item objects with the fields described above. N/A to panels.

Code examples

Set the layout property.

var layout = [{
    type: 'layoutGroup',
    orientation: 'horizontal',
    items: [{
        type: 'autoHideGroup',
        alignment: 'left',
        width: 80,
        unpinnedWidth: 200,
        items: [{
            type: 'layoutPanel',
            title: 'Toolbox',
            contentContainer: 'ToolboxPanel'
        }, {
            type: 'layoutPanel',
            title: 'Help',
            contentContainer: 'HelpPanel'
        }]
    }, {
        type: 'layoutGroup',
        orientation: 'vertical',
        width: 500,
        items: [{
            type: 'documentGroup',
            height: 400,
            minHeight: 200,
            items: [{
                type: 'documentPanel',
                title: 'Document 1',
                contentContainer: 'Document1Panel'
            }, {
                type: 'documentPanel',
                title: 'Document 2',
                contentContainer: 'Document2Panel'
            }]
        }, {
            type: 'tabbedGroup',
            height: 200,
            pinnedHeight: 30,
            items: [{
                type: 'layoutPanel',
                title: 'Error List',
                contentContainer: 'ErrorListPanel'
            }]
        }]
    }, {
        type: 'tabbedGroup',
        width: 220,
        minWidth: 200,
        items: [{
            type: 'layoutPanel',
            title: 'Solution Explorer',
            contentContainer: 'SolutionExplorerPanel'
        }, {
            type: 'layoutPanel',
            title: 'Properties',
            contentContainer: 'PropertiesPanel'
        }]
    }]
}, {
    type: 'floatGroup',
    width: 500,
    height: 200,
    position: {
        x: 350,
        y: 250
    },
    items: [{
        type: 'layoutPanel',
        title: 'Output',
        contentContainer: 'OutputPanel'
    }]
}];
$('#jqxDockingLayout').jqxDockingLayout({ width: 800, height: 600, layout: layout });

Get the layout property.

var layout = $('#jqxDockingLayout').jqxDockingLayout('layout');

Try it: layout is set to a custom array

minGroupHeight Number 100

Sets the default minimumn height for groups which are vertically aligned within their parent group.

Code examples

Set the minGroupHeight property.

$('#jqxDockingLayout').jqxDockingLayout({ minGroupHeight: 200 });

Get the minGroupHeight property.

var minGroupHeight = $('#jqxDockingLayout').jqxDockingLayout('minGroupHeight');

Try it: minGroupHeight is set to 200

minGroupWidth Number 100

Sets the default minimumn width for groups which are horizontally aligned within their parent group.

Code examples

Set the minGroupWidth property.

$('#jqxDockingLayout').jqxDockingLayout({ minGroupWidth: 150 });

Get the minGroupWidth property.

var minGroupWidth = $('#jqxDockingLayout').jqxDockingLayout('minGroupWidth');

Try it: minGroupWidth is set to 150

resizable Boolean true

Sets or gets wheter panels can be dynamically resized.

Code example

Set the resizable property.

$('#jqxDockingLayout').jqxDockingLayout({ resizable : false });

Get the resizable property.

var resizable = $('#jqxDockingLayout').jqxDockingLayout('resizable');

Try it: resizable is set to false

rtl Boolean false

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

$('#jqxDockingLayout').jqxDockingLayout({ rtl : true });

Get the rtl property.

var rtl = $('#jqxDockingLayout').jqxDockingLayout('rtl');

Try it: rtl is set to true

theme String ''

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

Include the theme's CSS file after jqx.base.css.
The following code example adds the 'energyblue' theme.


                                                                                        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />

Set the widget's theme property to 'energyblue' when you initialize it.

Try it: theme is set to 'energyblue'

width Number/String null

Sets or gets the docking layout's width.

Code examples

Set the width property.

$("#jqxDockingLayout").jqxDockingLayout({ width: 800 });

Get the width property.

var width = $('#jqxDockingLayout').jqxDockingLayout('width');

Try it: width is set to 800

create Event

This event is triggered when the widget is created.

Note: The create event binding has to be made before the jqxDockingLayout's initialization.

Code examples

Bind to the create event by type: jqxDockingLayout.

$('#jqxDockingLayout').on('create', function () { // Some code here. });

Try it: Bind to the create event by type: jqxDockingLayout.

dock Event

This event is triggered when a floatGroup has been docked.

Code examples

Bind to the dock event by type: jqxDockingLayout.

$('#jqxDockingLayout').on('dock', function (event) {
    var args = event.args,
        dockPosition = args.position,
        dockedItem = args.item;
    // Some code here.
});

Try it: Bind to the dock event by type: jqxDockingLayout.

floatGroupClosed Event

This event is triggered when a floatGroup has been closed.

Code examples

Bind to the floatGroupClosed event by type: jqxDockingLayout.

$('#jqxDockingLayout').on('floatGroupClosed', function (event) {
    var args = event.args,
        element = args.element, // the jqxWindow that represents the float group
        floatGroup = args.floatGroup; // the layout object of the float group
});

Try it: Bind to the floatGroupClosed event by type: jqxDockingLayout.

float Event

This event is triggered when a group or panel has been floated.

Code examples

Bind to the float event by type: jqxDockingLayout.

$('#jqxDockingLayout').on('float', function (event) {
    var floatedItem = event.args.item;
    // Some code here.
});

Try it: Bind to the float event by type: jqxDockingLayout.

pin Event

This event is triggered when a group has been pinned.

Code examples

Bind to the pin event by type: jqxDockingLayout.

$('#jqxDockingLayout').on('pin', function (event) {
    var pinnedItem = event.args.item;
    // Some code here.
});

Try it: Bind to the pin event by type: jqxDockingLayout.

resize Event

This event is triggered when a group has been resized (when the group has been resized with the mouse or when an adjacent group has been pinned, unpinned or closed).

Code examples

Bind to the resize event by type: jqxDockingLayout.

$('#jqxDockingLayout').on('resize', function (event) {
    var resizedItem = event.args.item;
    // Some code here.
});

Try it: Bind to the resize event by type: jqxDockingLayout.

unpin Event

This event is triggered when a group has been unpinned.

Code examples

Bind to the unpin event by type: jqxDockingLayout.

$('#jqxDockingLayout').on('unpin', function (event) {
    var unpinnedItem = event.args.item;
    // Some code here.
});

Try it: Bind to the unpin event by type: jqxDockingLayout.

addFloatGroup Method

Adds a new floatGroup.

Parameter	Type	Description
width	Number
height	Number
position	Object	position.x and position.y
panelType	String	'layoutPanel' or 'documentPanel'
title	String
content	String
initContent	Object	Function which initializes the content

Return Value
None

Code examples

Invoke the addFloatGroup method.

$('#jqxDockingLayout').jqxDockingLayout('addFloatGroup', 300, 200, { x: 500, y: 200 }, 'layoutPanel', 'Title', '<button id="myButton">My button</button>', function () {
                                                            $('#myButton').jqxButton();
                                                        });

Try it: add a new floatGroup

destroy Method

Destroys the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the destroy method.

$('#jqxDockingLayout').jqxDockingLayout('destroy');

Try it: destroy the widget

loadLayout Method

Loads a previously saved layout.

Parameter	Type	Description
layout	Object	the object returned from saveLayout

Return Value
None

Code examples

Invoke the loadLayout method.

// @param layout - an object returned by the method saveLayout
$('#jqxDockingLayout').jqxDockingLayout('loadLayout', layout);

Try it: load a previously saved layout

refresh Method

Refreshes the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the refresh method.

$('#jqxDockingLayout').jqxDockingLayout('refresh');

Try it: refresh the widget

render Method

Renders the widget.

Parameter	Type	Description
None

Return Value
None

Code examples

Invoke the render method.

$('#jqxDockingLayout').jqxDockingLayout('render');

Try it: render the widget

saveLayout Method

Saves the current layout of the widget. The object returned by this method can be passed to the method loadLayout.

Parameter	Type	Description
None

Return Value
Object

Code examples

Invoke the saveLayout method.

var layout = $('#jqxDockingLayout').jqxDockingLayout('saveLayout');

Try it: saves the widget's layout

Properties

Code example

Code examples

Code examples

Code examples

Code examples

Code example

Code example

Code examples

Events

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples

Methods

Code examples

Code examples

Code examples

Code examples

Code examples

Code examples