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

RootPane.panes.dockable

configuration

Specifies if the pane can be docked and allow inner docking of other panes. Accepts boolean or object. Available only for panes of type content.

rootPane.panes.dockable

Object|Boolean

Default: true

<div style="height:500px; width:1000px">
    <div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
            rootPane: {
                type: "split",
                id: "rootPaneId",
                panes: [{
                        type: "content",
                        title: "Pane 1",
                        content: "Pane 1",
                        dockable: false
                    },{
                        type: "content",
                        title: "Pane 2",
                        content: "Pane 2"
                    },{
                        type: "content",
                        title: "Pane 3",
                        content: "Pane 3",
                    }]
            }
        });
</script>

rootPane.panes.dockable.dock

Boolean

Specifies if the pane is docked. Available only for panes of type content.

Default: true

<div style="height:500px; width:1000px">
    <div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
    rootPane: {
        type: "split",
        panes: [{
            type: "content",
            title: "Docked Pane",
            content: "This pane is docked",
            dockable: {
                dock: true
            }
        }, {
            type: "content",
            title: "Undocked Pane",
            content: "This pane is not docked",
            dockable: {
                dock: false
            }
        }]
    }
});
</script>

rootPane.panes.dockable.innerDock

Boolean

Specifies if the pane allows inner docks. Available only for panes of type content.

Default: true

<div style="height:500px; width:1000px">
    <div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
            rootPane: {
                type: "split",
                id: "rootPaneId",
                panes: [{
                        type: "content",
                        title: "Pane 1",
                        content: "Pane 1",
                        dockable: {
                            innerDock: false
                        }
                    },{
                        type: "content",
                        title: "Pane 2",
                        content: "Pane 2"
                    },{
                        type: "content",
                        title: "Pane 3",
                        content: "Pane 3",
                    }]
            }
        });
</script>