jQWidgets
  • Docs
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Products
    • Angular
    • React
    • Vue
    • jQuery
    • Web Components
    • Blazor
    • Svelte
    • Templates
  • Download
Javascript/jQuery UI Widgets
  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Web Components
  • Blazor
  • Templates
  • Theme Builder
Show Demo List

Web UI Widgets

Data Grids and Tables

  • jqxGrid
  • jqxPivotGrid
  • jqxTreeGrid
  • jqxDataTable

Charts and Visualization

  • jqxChart
  • jqxGauge
  • jqxBarGauge
  • jqxBulletChart
  • jqxHeatMap
  • jqxTreeMap
  • jqxRangeSelector
  • jqxBarcode New
  • jqxQRcode New
  • jqxTagCloud
  • jqxDraw

Scheduling and Planning

  • jqxScheduler
  • jqxGantt
  • jqxKanban
  • jqxTimeline

AI and Collaboration

  • jqxChat New

Editors and Inputs

  • jqxEditor
  • jqxForm
  • jqxDateTimeInput
  • jqxCalendar
  • jqxTimePicker
  • jqxInput
  • jqxNumberInput
  • jqxMaskedInput
  • jqxFormattedInput
  • jqxComplexInput
  • jqxPasswordInput
  • jqxTextArea
  • jqxColorPicker
  • jqxSlider
  • jqxKnob
  • jqxRating
  • jqxButtons
  • jqxFileUpload
  • jqxValidator

Lists and Selection

  • jqxDropDownList
  • jqxComboBox
  • jqxListBox
  • jqxTree
  • jqxPickList

Navigation and Menus

  • jqxTabs
  • jqxMenu
  • jqxToolBar
  • jqxRibbon
  • jqxNavigationBar
  • jqxNavBar
  • jqxListMenu

Layout and Containers

  • jqxSplitter
  • jqxLayout
  • jqxDockingLayout
  • jqxDocking
  • jqxSplitLayout
  • jqxPanel
  • jqxExpander
  • jqxResponsivePanel
  • jqxScrollView
  • jqxScrollBar

Popups and Feedback

  • jqxWindow
  • jqxNotification
  • jqxTooltip
  • jqxPopOver
  • jqxLoader
  • jqxProgressBar

Data and Utilities

  • jqxDataAdapter
  • jqxDragDrop
  • jqxSortable
  • jqxResponse

Integration & Tools

  • Chart Studio(Beta)
  • JSEditor
  • Angular
  • Typescript
  • KnockoutJS
  • Bootstrap
  • RequireJS
  • jQuery Mobile
  • PHP
  • Java
  • Mobile Demos

jqxDockingLayout

  • Default Functionality
  • Save/Load Layout
  • IDE-like Layout
  • Dashboard
  • Fluid Size
  • Right to Left Layout
Theme:
  • Demo
  • View Source
  • API Reference

jQuery DockingLayout

jqxDockingLayout is the jQWidgets DockingLayout component for JavaScript/jQuery. Layout whose panels can be docked, floated and rearranged by drag-and-drop.

6 jqxDockingLayout demos with source code

  • Default Functionality – The default functionality of the jqxDockingLayout widget. This control allows the creation of complex layouts with panels that can be floated, docked, nested, resized, pinned, unpinned and closed.
  • Save/Load Layout – Save/load the current layout.
  • IDE-like Layout – Integrate other jQWidgets controls in jqxDockingLayout to create an IDE-like layout.
  • Dashboard – Use jqxDockingLayout and other jQWidgets components to create a dashboard.
  • Fluid Size – jqxDockingLayout Fluid Size Example. The width of the docking layout and both dimensions of its groups in this demo are in Percentages.
  • Right to Left Layout – Cases jqxDockingLayout's right-to-left support.

jqxDockingLayout API

jqxDockingLayout has 9 properties, 6 events and 6 methods. Its main members, those its demos use first:

  • layout (property) – Sets or gets the layout.
  • contextMenu (property) – Sets or gets whether a custom context menu will appear when certain elements of the widget are right-clicked.
  • loadLayout (method) – Loads a previously saved layout.
  • saveLayout (method) – Saves the current layout of the widget.
  • addFloatGroup (method) – Adds a new floatGroup.
  • minGroupHeight (property) – Sets the default minimum height for groups which are vertically aligned within their parent group.
  • minGroupWidth (property) – Sets the default minimum width for groups which are horizontally aligned within their parent group.
  • resizable (property) – Sets or gets whether panels can be dynamically resized.
  • dock (event) – This event is triggered when a floatGroup has been docked.
  • floatGroupClosed (event) – This event is triggered when a floatGroup has been closed.

Learn more

  • Angular version
  • React version
  • Vue version
jQWidgets
  • Facebook
  • X (Twitter)
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Products
  • Angular UI Components
  • React UI Components
  • Vue UI Components
  • Blazor UI Components
  • jQuery UI Components
  • Javascript UI Components
  • Svelte Data Grid (SvGrid)
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2026. All Rights Reserved.