jQuery DockManager Basic Usage

Loading Demo...

EXAMPLE
VIEW SOURCE
Edit in Kendo UI Dojo
Change Theme
default
Default Theme

Main

Main Dark

Nordic

Ocean Blue

Ocean Blue A11Y

Purple

Turquoise
Bootstrap Theme

Main

Bootstrap 3

Bootstrap 3 Dark

Main Dark

Nordic

Turquoise

Turquoise Dark

Urban

Vintage
Material Theme

Main

Arctic

Lime Dark

Main Dark

Material 2

Material 2 Dark

Nova
Classic Theme

Main

Green

Green Dark

Lavender

Lavender Dark

Main Dark

Metro

Metro Dark

Moonlight

Opal

Opal Dark

Silver

Silver Dark

Uniform
Fluent Theme

Main
Launch Theme Builder

Also available for:

$(document).ready(function () { $("#dockmanager").kendoDockManager({ rootPane: { id: "myRootPane", type: "split", orientation: "vertical", panes: [{ type: "split", panes: [{ type: "content", title: "Tools", content: "Some tools.", size: "20%" }, { type: "tab", panes: [{ type: "content", title: "File 1", id: "myFile", content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi suscipit porro optio veritatis obcaecati nostrum molestias dolor maxime! Molestias ducimus placeat quia possimus esse atque odio, a recusandae iste exercitationem. Sapiente fugit assumenda at explicabo quos consequuntur dicta cumque ex aspernatur, nesciunt itaque doloremque exercitationem eaque iusto. Iste non officia consequatur quis veritatis magni, quo autem dolores numquam dignissimos nemo." }, { type: "content", title: "File 2", content: "Etiam neque dui, rutrum vitae ullamcorper id, gravida vel leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sit amet massa turpis. Proin mattis dui tempor tincidunt tincidunt. Proin elementum ornare elit et imperdiet. Donec nunc ipsum, molestie vitae neque sed, lacinia mollis lacus. Donec viverra egestas enim nec vestibulum. Sed ac condimentum felis. Aenean luctus sed enim sed faucibus. Donec gravida, dui sit amet fringilla dignissim, metus elit varius nisl, a interdum justo ligula nec leo. Nunc et ultricies felis. Nulla facilisi. Sed sed lacus eu neque aliquet placerat" }, { type: "content", title: "File 3", content: "Cras hendrerit mattis semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nec dapibus quam. Duis sollicitudin nisl et purus venenatis, ut interdum massa tincidunt. Vestibulum sit amet nulla at dolor ullamcorper iaculis. Morbi gravida tincidunt lectus dapibus suscipit. Integer aliquet ligula enim, quis varius sapien dapibus in. Donec pulvinar ex et sapien rutrum venenatis. Quisque pulvinar, dui vitae pretium auctor, nunc mauris interdum est, vitae ullamcorper mi mauris sit amet felis. Phasellus non justo gravida, placerat risus quis, facilisis lacus. Suspendisse potenti. Praesent bibendum, lectus et fermentum varius, mi magna egestas nulla, ut interdum augue purus vitae leo.", unpinnable: { unpinned: true } }], size: "40%" }, { type: "split", orientation: "vertical", title: "container pane", panes: [{ type: "tab", panes: [{ type: "content", title: "Properties", content: "Properties content" }, { type: "content", title: "History", content: "History content" }] }, { type: "content", title: "Layers", content: "Layers content" }], size: "40%" }], size: "80%" }, { type: "content", header: "Console", content: "Console content", size: "20%" }] } }) }); #example { min-height: 350px; }

Description

The Kendo UI for jQuery DockManager give you the possibility of employing the component in more simplistic scenarios as well.

The following example showcases such a basic usage scenario in which the DockManager can be embedded.

jQuery DockManager Basic Usage

Description

Additional Resources