Sets or gets the docking's width.

Code examples

Set the width property.

$('#jqxDocking').jqxDocking({width:"200px"});

Get the width property.

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

Sets or gets the docking's height.

Code examples

Set the height property.

$('#jqxDocking').jqxDocking({height:"400px"});

Get the height property.

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

Sets or gets whether the docking is disabled.

Code examples

Set the disabled property.

$('#jqxDocking').jqxDocking({ disabled:true }); 

Get the disabled property.

var disabled = $('#jqxDocking').jqxDocking('disabled');

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

Code example

Set the rtl property.

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

Get the rtl property.

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

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.

Sets or gets docking's orientation. This property is setting whether the panels are going to be side by side or below each other.

Code examples

Set the orientation property.

$('#jqxDocking').jqxDocking({ orientation: 'vertical' }); 

Get the vertical property.

var vertical = $('#jqxDocking').jqxDocking('vertical');

Sets or gets docking's mode.

Possible Values:

'default'-the user can  drop every window inside any docking panel or outside the docking panels

'docked'-the user can drop every window just into the docking panels

'floating'-the user can drop any window just outside of the docking panels.

Code examples

Set the mode property.

$('#jqxDocking').jqxDocking({ mode: 'docked' }); 

Get the mode property.

var mode = $('#jqxDocking').jqxDocking('mode');

Sets or gets the opacity of the window which is currently dragged by the user.

Code examples

Set the floatingWindowOpacity property.

$('#jqxDocking').jqxDocking({ floatingWindowOpacity: 0.5 }); 

Get the floatingWindowOpacity property.

var floatingWindowOpacity = $('#jqxDocking').jqxDocking('floatingWindowOpacity');

Sets ot gets specific mode for each window. The value of the property is object with keys - window's ids and values - specific modes.

Code examples

Set the windowsMode property.

$('#jqxDocking').jqxDocking({ windowsMode: { 'window0': 'default', 'window1': 'docked' } }); 

Get the windowsMode property.

var windowsMode = $('#jqxDocking').jqxDocking('windowsMode');

Enables or disables the cookies. If the cookies are enabled then the docking layout is going to be saved and kept every time the page is being reloaded.

Code examples

Set the cookies property.

$('#jqxDocking').jqxDocking({ cookies: true }); 

Get the cookies property.

var cookies = $('#jqxDocking').jqxDocking('cookies');

Sets or gets the cookie options.

Code examples

Set the cookieOptions property.

$('#jqxDocking').jqxDocking({ cookieOptions: { domain: 'jqwidgets.com', expires: 90 } }); 

Get the cookieOptions property.

var cookieOptions = $('#jqxDocking').jqxDocking('cookieOptions');

Sets or gets the offset between the windows.

Code examples

Set the windowsOffset property.

$('#jqxDocking').jqxDocking({ windowsOffset: 3 }); 

Get the windowsOffset property.

var windowsOffset = $('#jqxDocking').jqxDocking('windowsOffset');

This event is triggered when the user start to drag any window.

Code examples

Bind to the dragStart event by type: jqxDocking.

$('#jqxDocking').on('dragStart', function (event) { // Some code here. }); 

This event is triggered when the user drop any window.

Code examples

Bind to the dragEnd event by type: jqxDocking.

$('#jqxDocking').on('dragEnd', function (event) { // Some code here. }); 

Moving window to specific position into specific panel. This method have three parameters. The first one is id of the window we want to move, the second one is number of the panel where we want to move our window and the last one is the position into this panel.

Code example

Invoke the move method.

$('#jqxDocking').jqxDocking('move', 'windowId', 0, 1);
                        

Exporting docking's layout into a JSON string.

Code example

Invoke the exportLayout method.

$('#jqxDocking').jqxDocking('exportLayout');
                        

Importing the docking layout from a JSON string.

Code example

Invoke the importLayout method.

$('#jqxDocking').jqxDocking('importLayout', '{"panel0": {"window2":{"collapsed":false}},"floating":{"window1":{"x":"150px","y":"70px","width":"381px","height":"auto","collapsed":false}},"orientation": "horizontal"}');
                        

Disabling the jqxDocking.

Code example

Invoke the disable method.

$('#jqxDocking').jqxDocking('disable');
                        

Enabling the docking

Code example

Invoke the enable method.

$('#jqxDocking').jqxDocking('enable');
                        

Setting mode to a specific window. This method accepts two arguments - window id and mode type.

Code example

Invoke the setWindowMode method.

$('#jqxDocking').jqxDocking('setWindowMode', 'windowId','default');
                        

Hiding the close button of a specific window.

Code example

Invoke the hideCloseButton method.

$('#jqxDocking').jqxDocking('hideCloseButton', 'windowId');
                        

Showing the close button of a specific window.

Code example

Invoke the showCloseButton method.

$('#jqxDocking').jqxDocking('showCloseButton', 'windowId');
                        

Hiding the collapse button of a specific window.

Code example

Invoke the hideCollapseButton method.

$('#jqxDocking').jqxDocking('hideCollapseButton', 'windowId');
                        

Showing the collapse button of a specific window.

Code example

Invoke the showCollapseButton method.

$('#jqxDocking').jqxDocking('showCollapseButton', 'windowId');
                        

Expanding a specific window.

Code example

Invoke the expandWindow method.

$('#jqxDocking').jqxDocking('expandWindow', 'windowId');

Collapsing a specific window.

Code example

Invoke the collapseWindow method.

$('#jqxDocking').jqxDocking('collapseWindow', 'windowId');

Moving window in floating mode to a specific position.

Code example

Invoke the setWindowPosition method.

$('#jqxDocking').jqxDocking('setWindowPosition', 'windowId', 300, 531);

Hiding the close buttons of all windows.

Code example

Invoke the hideAllCloseButtons method.

$('#jqxDocking').jqxDocking('hideAllCloseButtons');

Hiding the collapse buttons of all windows.

Code example

Invoke the hideAllCollapseButtons method.

$('#jqxDocking').jqxDocking('hideAllCollapseButtons');

Showing the close buttons of all windows.

Code example

Invoke the showAllCloseButtons method.

$('#jqxDocking').jqxDocking('showAllCloseButtons');

Showing the collapse buttons of all windows.

Code example

Invoke the showAllCollapseButtons method.

$('#jqxDocking').jqxDocking('showAllCollapseButtons');

Pinning a specific window

Code example

Invoke the pinWindow method.

$('#jqxDocking').jqxDocking('pinWindow', 'windowId');

Unpinning a specific window

Code example

Invoke the unpinWindow method.

$('#jqxDocking').jqxDocking('unpinWindow', 'windowId');

Enabling the resize of a specific window which is not docked into a panel.

Code example

Invoke the enableWindowResize method.

$('#jqxDocking').jqxDocking('enableWindowResize', 'windowId');

Disabling the resize of a specific window.

Code example

Invoke the disableWindowResize method.

$('#jqxDocking').jqxDocking('disableWindowResize', 'windowId');

Adding new window to the docking. This method accepts four arguments. The first one is id of the window we wish to add to the docking. The second argument is window's mode (default, docked, floating) the third argument is the panel's number and the last one is the position into the panel. The last three arguments are optional.

Code example

Invoke the addWindow method.

$('#jqxDocking').jqxDocking('addWindow', 'windowId', 'default', 0, 1);

Closing specific window.

Code example

Invoke the closeWindow method.

$('#jqxDocking').jqxDocking('closeWindow', 'windowId');

Destroys the widget.

Code examples

Invoke the destroy method.

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