New to Kendo UI for jQuery? Download free 30-day trial

jQuery DockManager Events

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

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

events.html

Also available for:

$(document).ready(function () { function onDragStart(e) { kendoConsole.log("event :: dragStart"); } function onDrag(e) { kendoConsole.log("event :: drag"); } function onDragEnd(e) { kendoConsole.log("event :: dragEnd"); } function onPin(e) { kendoConsole.log("event :: pin"); } function onClose(e) { kendoConsole.log("event :: close"); } function onUnpin(e) { kendoConsole.log("action :: unpin"); } function onDock(e) { kendoConsole.log("action :: dock"); } function onInnerDock(e) { kendoConsole.log("action :: innerDock"); } function onResize(e) { kendoConsole.log("action :: resize"); } $("#dockmanager").kendoDockManager({ dragStart: onDragStart, dragEnd: onDragEnd, drag: onDrag, pin: onPin, unpin: onUnpin, close: onClose, dock: onDock, innerDock: onInnerDock, resize: onResize, rootPane: { id: "myRootPane", type: "split", orientation: "vertical", panes: [{ type: "split", panes: [{ id:"tools", type: "content", title: "Tools", content: "Some tools.", size: "20%" }, { id: "files", type: "tab", panes: [{ id: "file1", 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." }, { id: "file2", 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" }, { id: "file2", 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%" }, { id: "options", type: "split", orientation: "vertical", title: "container pane", panes: [{ type: "tab", panes: [{ id: "properties", type: "content", title: "Properties", content: "Properties content" }, { id: "history", type: "content", title: "History", content: "History content" }] }, { id: "layers", type: "content", title: "Layers", content: "Layers content" }], size: "40%" }], size: "80%" }, { id: "console", type: "content", header: "Console", content: "Console content", size: "20%" }] } }) }); #example { min-height: 350px; }

Description

The Kendo UI for jQuery DockManager supports a comprehensive set of events which enable you to provide fluent experience and smooth interaction with the component.

This demo shows how to handle the following events:

dock—triggered when a pane is docked.
pin—triggered when a pane is pinned.
unpin—triggered when a pane is unpinned.
innerDock—triggered when a pane is docked inside the current pane.
resize—triggered when a pane is resized.
drag—triggered when a pane is dragged.
dragStart—fired when item drag starts.
dragEnd—fired when item drag ends.
close—triggered when a pane is closed.

jQuery DockManager Events

Description

Support & Learning Resources

Additional Resources