jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,089 lines • 61.8 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../../../../styles/jqx.apireference.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../scripts/documentation.js"></script>
<meta name="keywords" content="jQuery, Docking Layout, Help Documentation, jQuery Docking Layout, JavaScript Docking Layout, jQuery Mobile Docking Layout, jqxDockingLayout" />
<meta name="description" content="This page represents the help documentation of the jqxDockingLayout widget." />
<title>jqxDockingLayout API Reference</title>
<script type="text/javascript">
$(document).ready(function () {
$(".documentation-option-type-click").click(function (event) {
$(event.target).parents('tr').next().find(".property-content").toggle();
});
});
</script>
</head>
<body>
<div id="properties">
<h2 class="documentation-top-header">Properties
</h2>
<table class="documentation-table">
<tr>
<th>Name
</th>
<th>Type
</th>
<th>Default
</th>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span14'>contextMenu</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
(Requires jqxmenu.js.)
</p>
<p>
Sets or gets wheter a custom context menu will appear when certain elements of the
widget are right-clicked.
</p>
<h4>Code example
</h4>
<p>
Set the <code>contextMenu</code> property.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout({ contextMenu : true }); </code></pre>
<p>
Get the <code>contextMenu</code> property.
</p>
<pre><code>var contextMenu = $('#jqxDockingLayout').jqxDockingLayout('contextMenu');
</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-contextmenu-property">contextMenu is set to true</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span5'>height</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the docking layout's height.
</p>
<h4>Code examples
</h4>
<p>
Set the <code>height</code> property.
</p>
<pre><code>$("#jqxDockingLayout").jqxDockingLayout({ height: 800 });</code></pre>
<p>
Get the <code>height</code> property.
</p>
<pre><code>var height = $('#jqxDockingLayout').jqxDockingLayout('height');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-height-property">height is set to 800</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span4'>layout</span>
</td>
<td>
<span>Array</span>
</td>
<td>[]
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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'.
</p>
<p>
Each object in the layout array can have the following properties, with <span style="text-decoration: underline;">some restrictions based on the type
</span>:
</p>
<ul>
<li>
<strong>type</strong>. Possible values:
<ul>
<li>'layoutGroup' - container for other groups. It has no visual features. <span style="text-decoration: underline;">The root item is always of this type.</span>
</li>
<li>'tabbedGroup' - a group that contains layoutPanels. It is represented by a jqxWindow-like
panel with a bottom-aligned jqxRibbon inside.
</li>
<li>'documentGroup' - a group that contains documentPanels. It is represented by a top-aligned
jqxRibbon.
</li>
<li>'autoHideGroup' - a group that contains layoutPanels. It is represented by a jqxRibbon
with <code>mode: 'popup'</code>. 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.
</li>
<li>'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.
</li>
<li>'documentPanel' - a panel that can be inserted in a documentGroup. It is represented
by a ribbon item.
</li>
<li>'floatGroup' - a floating group that can contain a tabbedGroup or a layoutPanel.
It is represented by a jqxWindow. <span style="text-decoration: underline;">Initial
floatGroups have to be defined after the root layoutGroup in the layout array.
</span>
</li>
</ul>
</li>
<li>
<strong>alignment</strong> - sets the alignment of an autoHideGroup. Possible values:
<ul>
<li>'left'</li>
<li>'right'</li>
<li>'top'</li>
<li>'bottom'</li>
</ul>
</li>
<li>
<strong>allowClose</strong> - applicable to tabbedGroups, floatGroups, layoutPanels
and documentPanels. If set to <em>false</em>, the group/panel cannot be closed.
</li>
<li>
<strong>allowPin</strong> - applicable only to tabbedGroups. If set to <em>false</em>,
the group cannot be pinned.
</li>
<li>
<strong>allowUnpin</strong> - applicable only to autoHideGroups. If set to <em>false</em>,
the group cannot be unpinned.
</li>
<li>
<strong>contentContainer</strong> - 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.
</li>
<li>
<strong>height</strong> - 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).
</li>
<li>
<strong>initContent</strong> - 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.
</li>
<li>
<strong>minHeight</strong> - sets the minimumn height (in pixels) of a group which
is vertically aligned within its parent group. Disregards the value of the <strong>minGroupHeight</strong>
property.
</li>
<li>
<strong>minWidth</strong> - sets the minimumn width (in pixels) of a group which
is horizontally aligned within its parent group. Disregards the value of the <strong>minGroupWidth
</strong>property.
</li>
<li>
<strong>orientation</strong> - orients child items either horizontally or vertically.
Applicable only to layoutGroups. Possible values:
<ul>
<li>'horizontal'</li>
<li>'vertical'</li>
</ul>
</li>
<li>
<strong>pinnedHeight</strong> - sets what the height of a tabbedGroup will be after
it is pinned.
</li>
<li>
<strong>pinnedWidth</strong> - sets what the width of a tabbedGroup will be after
it is pinned.
</li>
<li><strong>popupContentSize</strong> - 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).</li>
<li>
<strong>position</strong> - sets the initial position of a floatGroup. The position
property is an object with the following properties:<ul>
<li>x</li>
<li>y</li>
</ul>
</li>
<li><strong>selected</strong> - sets whether a panel is initially selected. N/A to groups.</li>
<li>
<strong>title</strong> - sets the title of a panel. Represented by the corresponding
ribbon item's title. N/A to groups.
</li>
<li>
<strong>unpinnedHeight</strong> - sets what the height of an autoHideGroup will
be after it is unpinned.
</li>
<li>
<strong>unpinnedWidth</strong> - sets what the width of an autoHideGroup will be
after it is unpinned.
</li>
<li>
<strong>width</strong> - 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).
</li>
<li>
<strong>items</strong> - an array of item objects with the fields described above.
N/A to panels.
</li>
</ul>
<h4>Code examples
</h4>
<p>
Set the <code>layout</code> property.
</p>
<pre><code>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 });</code></pre>
<p>
Get the <code>layout</code> property.
</p>
<pre><code>var layout = $('#jqxDockingLayout').jqxDockingLayout('layout');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-layout-property">layout is set to a custom array
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span3'>minGroupHeight</span>
</td>
<td>
<span>Number</span>
</td>
<td>100
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the default minimumn height for groups which are vertically aligned within
their parent group.
</p>
<h4>Code examples
</h4>
<p>
Set the <code>minGroupHeight</code> property.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout({ minGroupHeight: 200 }); </code></pre>
<p>
Get the <code>minGroupHeight</code> property.
</p>
<pre><code>var minGroupHeight = $('#jqxDockingLayout').jqxDockingLayout('minGroupHeight');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-mingroupheight-property">minGroupHeight is set to 200
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span2'>minGroupWidth</span>
</td>
<td>
<span>Number</span>
</td>
<td>100
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the default minimumn width for groups which are horizontally aligned within
their parent group.
</p>
<h4>Code examples
</h4>
<p>
Set the <code>minGroupWidth</code> property.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout({ minGroupWidth: 150 });</code></pre>
<p>
Get the <code>minGroupWidth</code> property.
</p>
<pre><code>var minGroupWidth = $('#jqxDockingLayout').jqxDockingLayout('minGroupWidth');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-mingroupwidth-property">minGroupWidth is set to 150
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span13'>resizable</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>true
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets wheter panels can be dynamically resized.
</p>
<h4>Code example
</h4>
<p>
Set the <code>resizable</code> property.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout({ resizable : false }); </code></pre>
<p>
Get the <code>resizable</code> property.
</p>
<pre><code>var resizable = $('#jqxDockingLayout').jqxDockingLayout('resizable'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-resizable-property">resizable is set to false
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span51'>rtl</span>
</td>
<td>
<span>Boolean</span>
</td>
<td>false
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets a value indicating whether widget's elements are aligned to support
locales using right-to-left fonts.
</p>
<h4>Code example
</h4>
<p>
Set the <code>rtl</code> property.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout({ rtl : true }); </code></pre>
<p>
Get the <code>rtl</code> property.
</p>
<pre><code>var rtl = $('#jqxDockingLayout').jqxDockingLayout('rtl'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-rtl-property">rtl is set to true
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span63'>theme</span>
</td>
<td>
<span>String</span>
</td>
<td>''
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets the widget's theme.
</p>
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:
<ul>
<li>Include the theme's CSS file after jqx.base.css.<br />
The following code example adds the 'energyblue' theme.
<pre><code>
<pre><code><link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.energyblue.css" type="text/css" /></code></pre>
</code></pre>
</li>
<li>Set the widget's theme property to 'energyblue' when you initialize it. </li>
</ul>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-theme-property">theme is set to 'energyblue'
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span1'>width</span>
</td>
<td>
<span>Number/String</span>
</td>
<td>null
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Sets or gets the docking layout's width.
</p>
<h4>Code examples
</h4>
<p>
Set the <code>width</code> property.
</p>
<pre><code>$("#jqxDockingLayout").jqxDockingLayout({ width: 800 });</code></pre>
<p>
Get the <code>width</code> property.
</p>
<pre><code>var width = $('#jqxDockingLayout').jqxDockingLayout('width');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-width-property">width is set to 800
</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Events
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span27'>create</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when the widget is created.
</p>
<p>
<em>Note:</em> The <strong>create</strong> event binding has to be made before the
jqxDockingLayout's initialization.
</p>
<h4>Code examples
</h4>
<p>
Bind to the <code>create</code> event by type: jqxDockingLayout.
</p>
<pre><code>$('#jqxDockingLayout').on('create', function () { // Some code here. });</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-create-event">Bind to the create event by type: jqxDockingLayout.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>dock</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a floatGroup has been docked.
</p>
<h4>Code examples
</h4>
<p>
Bind to the <code>dock</code> event by type: jqxDockingLayout.
</p>
<pre><code>$('#jqxDockingLayout').on('dock', function (event) {
var args = event.args,
dockPosition = args.position,
dockedItem = args.item;
// Some code here.
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-dock-event">Bind to the dock event by type: jqxDockingLayout.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span15'>floatGroupClosed</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a floatGroup has been closed.
</p>
<h4>
Code examples
</h4>
<p>
Bind to the <code>floatGroupClosed</code> event by type: jqxDockingLayout.
</p>
<pre><code>$('#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
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-dock-event">
Bind to the floatGroupClosed event by type: jqxDockingLayout.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span16'>float</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a group or panel has been floated.
</p>
<h4>Code examples
</h4>
<p>
Bind to the <code>float</code> event by type: jqxDockingLayout.
</p>
<pre><code>$('#jqxDockingLayout').on('float', function (event) {
var floatedItem = event.args.item;
// Some code here.
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-float-event">Bind to the float event by type: jqxDockingLayout.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span11'>pin</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a group has been pinned.
</p>
<h4>Code examples
</h4>
<p>
Bind to the <code>pin</code> event by type: jqxDockingLayout.
</p>
<pre><code>$('#jqxDockingLayout').on('pin', function (event) {
var pinnedItem = event.args.item;
// Some code here.
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-pin-event">Bind to the pin event by type: jqxDockingLayout.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span8'>resize</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
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).
</p>
<h4>Code examples
</h4>
<p>
Bind to the <code>resize</code> event by type: jqxDockingLayout.
</p>
<pre><code>$('#jqxDockingLayout').on('resize', function (event) {
var resizedItem = event.args.item;
// Some code here.
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-resize-event">Bind to the resize event by type: jqxDockingLayout.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>unpin</span>
</td>
<td>
<span>Event</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
This event is triggered when a group has been unpinned.
</p>
<h4>Code examples
</h4>
<p>
Bind to the <code>unpin</code> event by type: jqxDockingLayout.
</p>
<pre><code>$('#jqxDockingLayout').on('unpin', function (event) {
var unpinnedItem = event.args.item;
// Some code here.
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-unpin-event">Bind to the unpin event by type: jqxDockingLayout.
</a>
</div>
</div>
</td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<h2 class="documentation-top-header">Methods
</h2>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span17'>addFloatGroup</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Adds a new floatGroup.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>width</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>height</em></td>
<td>Number</td>
<td></td>
</tr>
<tr>
<td><em>position</em></td>
<td>Object</td>
<td>position.x and position.y</td>
</tr>
<tr>
<td><em>panelType</em></td>
<td>String</td>
<td>'layoutPanel' or 'documentPanel'</td>
</tr>
<tr>
<td><em>title</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>content</em></td>
<td>String</td>
<td></td>
</tr>
<tr>
<td><em>initContent</em></td>
<td>Object</td>
<td>Function which initializes the content</td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>addFloatGroup</code> method.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout('addFloatGroup', 300, 200, { x: 500, y: 200 }, 'layoutPanel', 'Title', '<button id="myButton">My button</button>', function () {
$('#myButton').jqxButton();
});</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-addfloatgroup-method">add a new floatGroup</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span9'>destroy</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Destroys the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples
</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-destroy-method">destroy the widget
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span28'>loadLayout</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Loads a previously saved layout.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>layout</em></td>
<td>Object</td>
<td>the object returned from saveLayout</td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples
</h4>
<p>
Invoke the <code>loadLayout</code> method.
</p>
<pre><code>// @param layout - an object returned by the method saveLayout
$('#jqxDockingLayout').jqxDockingLayout('loadLayout', layout);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-loadlayout-method">load a previously saved layout
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span6'>refresh</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Refreshes the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples
</h4>
<p>
Invoke the <code>refresh</code> method.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout('refresh');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-refresh-method">refresh the widget
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span7'>render</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Renders the widget.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples
</h4>
<p>
Invoke the <code>render</code> method.
</p>
<pre><code>$('#jqxDockingLayout').jqxDockingLayout('render');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-render-method">render the widget
</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span10'>saveLayout</span>
</td>
<td>
<span>Method</span>
</td>
<td></td>
</tr>
<tr>
<td colspan='3' style='width: 100%'>
<div class="documentation-option-description property-content" style="display: none;">
<p>
Saves the current layout of the widget. The object returned by this method can be
passed to the method <strong>loadLayout</strong>.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>Object</em>
</div>
<h4>Code examples
</h4>
<p>
Invoke the <code>saveLayout</code> method.
</p>
<pre><code>var layout = $('#jqxDockingLayout').jqxDockingLayout('saveLayout');</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxdockinglayout-savelayout-method">saves the widget's layout
</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>