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

RootPane.panes

configuration

An array of pane definitions.

rootPane.panes

Array

<div style="height:500px; width:1000px">
    <div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
    rootPane: {
        type: "split",
        panes: [{
            type: "content",
            title: "First Pane",
            content: "Content of the first pane"
        }, {
            type: "content",
            title: "Second Pane",
            content: "Content of the second pane"
        }]
    }
});
</script>

rootPane.panes.closeable

Boolean

Specifies if the pane can be closed. 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: "Split Pane 1",
                        closeable: false
                    },{
                        type: "content",
                        title: "Pane 2",
                        content: "Split Pane 2",
                    }]
            }
        });
</script>

rootPane.panes.content

String|Function

The content of the pane. Available only for panes of type content.

<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: "Split Pane 1",
                    },{
                        type: "content",
                        title: "Pane 2",
                        content: ({ username }) => `User name: ${username}`,
                    }]
            }
        });
</script>

rootPane.panes.dockable

Object|Boolean

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.

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>

Sets the content of the header. Accepts a string or a kendo template. By default, the same content is displayed in the tab when the pane is unpinned or within a pane of type tab. If not specified the title is displayed. Available only for panes of type content.

<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",
                        header: "Pane 1 header"
                    },{
                        type: "content",
                        title: "Pane 2",
                        content: ({ headerContent }) => `Pane: ${headerContent}`,
                    },{
                        type: "content",
                        title: "Pane 3",
                        content: "Pane 3",
                    }]
            }
        });
</script>

rootPane.panes.id

String

Defines the id of the pane

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

rootPane.panes.orientation

String

Specifies the orientation of a split pane. Supported values are "horizontal" and "vertical".

Default: "horizontal"

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

rootPane.panes.panes

Array

Specifies an array of pane definitions.

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

rootPane.panes.selected

Number

Specifies the index of the initially selected tab. Available only for panes of type tab.

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

rootPane.panes.size

String

Specifies the size of a pane defined as pixels (i.e. "200px") or as a percentage (i.e. "50%").

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

rootPane.panes.tabHeader

String|Function

Sets the content of the tab when the pane is unpinned or within a tab pane. If not specified, header content is used. Available only for panes of type content.

<div style="height:500px; width:1000px">
    <div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
            rootPane: {
                type: "split",
                panes: [{
                    type: "content",
                    header: "Pane 1",
                    content: "Pane content"
                }, {
                    type: "content",
                    header: "Pane 2",
                    content: "Other content"
                }, {
                    type: "content",
                    title: "Unpinned",
                    tabHeader: "I'm unpinned",
                    content: "Some unpinned content",
                    unpinnable: {
                        unpinned: true
                    }
                }]
            }
        });
</script>

rootPane.panes.title

String

Sets the title of the pane. Available only for panes of type content.

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

rootPane.panes.type

String

Specifies the type of the pane. Available options are tab, split or content.

<div style="height:500px; width:1000px">
    <div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
            rootPane: {
                type: "split",
                panes: [{
                    type: "split",
                    panes: [{
                            type: "content",
                            title: "Pane 1",
                            content: "Split Pane 1",
                            size: "40%"
                        }, {
                            type: "tab",
                                panes: [{
                                    type: "content",
                                    title: "Tab 1",
                                    content: "Lorem ipsum dolor sit amet consectetur adipisicing elit."
                                },
                                {
                                    type: "content",
                                    title: "Tab 2",
                                    content: "Commodi suscipit porro optio veritatis obcaecati nostrum molestias dolor maxime!"
                                },
                                {
                                    type: "content",
                                    title: "Tab 3",
                                    content: "Molestias ducimus placeat quia possimus esse atque odio, a recusandae iste exercitationem"
                                }],
                            size: "60%"
                        }]
                    }, {
                    type: "content",
                    header: "Bottom Tab",
                    content: "Bottom content",
                    size: "50%"
                }, {
                    type: "content",
                    title: "Unpinned",
                    content: "Some unpinned content",
                    unpinnable: {
                        unpinned: true
                    }
                }]
            }
        });
</script>

rootPane.panes.unpinnable

Object|Boolean

Specifies if the pane can be pinned/unpinnned. 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: "Unpinnable Pane",
            content: "This pane can be unpinned",
            unpinnable: true
        }, {
            type: "content",
            title: "Non-Unpinnable Pane",
            content: "This pane cannot be unpinned",
            unpinnable: false
        }]
    }
});
</script>

rootPane.panes.visible

Boolean

Specifies if the pane is initially visible.

Default: true

<div style="height:500px; width:1000px">
    <div id="dockmanager"></div>
</div>
<script>
$("#dockmanager").kendoDockManager({
            rootPane: {
                type: "split",
                panes: [{
                    type: "content",
                    header: "Pane 1",
                    content: "Pane content"
                },{
                    type: "content",
                    header: "Pane 2",
                    content: "Hidden Pane",
                    visible: false
                }, {
                    type: "content",
                    header: "Pane 3",
                    content: "Other content"
                }, {
                    type: "content",
                    title: "Unpinned",
                    content: "Some unpinned content",
                    unpinnable: {
                        unpinned: true
                    }
                }]
            }
        });
</script>

Related Members