jQuery UI Widgets Forums Layouts Layout and Docking Layout How can I create nested layouts inside DocumentPanel?

This topic contains 5 replies, has 2 voices, and was last updated by  Hristo 6 days, 17 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • pk
    Participant

    I want to have a layout like:
    COLUMN-A, COLUMN-B, COLUMN-C.

    COLUMN-B is a tabbed layout (documentGroup).
    Inside each tab, I want to have separate split sections. For example:

    TAB-A: contains items SECTION-A, SECTION-B.
    TAB-B: contains items SECTION-C, SECTION-D.

    What I have tried so far:
    a) Putting the sections in DocumentGroup->LayoutGroup->LayoutPanel. Doesn’t work.
    b) Putting the sections in DocumentGroup->LayoutGroup->DocumentPanel. Doesn’t work.
    c) Putting the sections in DocumentGroup->DocumentGroup->DocumentPanel. Doesn’t work.
    d) Creating the sections in a separate jqxDockingLayout (outside) and then moving them inside (via jQuery). Works, but the resize bars get disabled.

    Is there a way to have this functionality with full resize bars?


    Hristo
    Participant

    Hello pk,

    Could you clarify it?
    Also, I would like to ask you what do you mean by this “Putting the sections”?
    If you want to set jqxSplitter or jqxTabs before that it is important to use also for all nested widgets the init-” callback.
    This is the right place for the initialization of the inner widgets.
    I would like to suggest you play a little bit with the options of the jqxDockingLayout.
    Please, take a look at this example which demonstrates how you could achieve three columns:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title id="Description">This demo shows 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.</title>
        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <style type="text/css">
            .jqx-layout-group-auto-hide-content-vertical {
                width: 200px;
            }
        </style>
        <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxribbon.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxlayout.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdockinglayout.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // the 'layout' JSON array defines the internal structure of the docking layout
                var layout = [{
                    type: 'layoutGroup',
                    orientation: 'horizontal',
                    items: [
                        {
                            type: 'layoutGroup',
                            orientation: 'vertical',
                            width: '40%',
                            items: [
                            {
                                type: 'documentGroup',
                                height: '50%',
                                minHeight: '20%',
                                items: [{
                                    type: 'documentPanel',
                                    title: 'Document A',
                                    contentContainer: 'DocumentAPanel'
                                }, {
                                    type: 'documentPanel',
                                    title: 'Document B',
                                    contentContainer: 'DocumentBPanel'
                                }]
                            },
                            {
                                type: 'tabbedGroup',
                                // type: 'layoutGroup',
                                height: '50%',
                                // pinnedHeight: '10%',
                                items: [{
                                    type: 'layoutPanel',
                                    title: 'Error List',
                                    contentContainer: 'ErrorListPanel'
                                }, {
                                    type: 'layoutPanel',
                                    title: 'Output',
                                    contentContainer: 'OutputPanel',
                                    selected: true
                                }]
                            }
                            ]
                        },
                        {
                            type: 'tabbedGroup',
                            width: '30%',
                            items: [{
                                type: 'layoutPanel',
                                title: 'Solution Explorer',
                                contentContainer: 'SolutionExplorerPanel'
                            }]
                        },
                        {
                            type: 'tabbedGroup',
                            width: '30%',
                            items: [{
                                type: 'layoutPanel',
                                title: 'Document C',
                                contentContainer: 'DocumentCPanel'
                            }]
                        }
                    ]
                }];
    
                $('#dockingLayout').jqxDockingLayout({ width: getWidth('dockingLayout'), height: 600, layout: layout });
            });
        </script>
    </head>
    
    <body>
        <div id="dockingLayout">
            <!--The panel content divs can have a flat structure-->
            <!--autoHideGroup-->
            <div data-container="ToolboxPanel">
                List of tools</div>
            <div data-container="HelpPanel">
                Help topics</div>
            <!--documentGroup-->
            <div data-container="DocumentAPanel">
                Document A content</div>
            <div data-container="DocumentBPanel">
                Document B content</div>
            <div data-container="DocumentCPanel">
                Document C content</div>
            <!--bottom tabbedGroup-->
            <div data-container="ErrorListPanel">
                List of errors</div>
            <!--right tabbedGroup-->
            <div data-container="SolutionExplorerPanel">
                <div id="solutionExplorerTree" style="border: none;">
                </div>
            </div>
            <div data-container="PropertiesPanel">
                List of properties</div>
            <!--floatGroup-->
            <div data-container="OutputPanel">
                <div style="font-family: Consolas;">
                    <p>
                        Themes installation complete.</p>
                    <p>
                        List of installed stylesheet files. Include at least one stylesheet Theme file and
                        the images folder:</p>
                    <ul>
                        <li>styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
                            be always included in your project.</li>
                        <li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
                        <li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
                        <li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
                        <li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
                        <li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
                        <li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
                        <li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
                        <li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
                        <li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
                        <li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
                        <li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
                        <li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
                        <li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
                        <li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
                        <li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
                        <li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
                        <li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
                        <li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
                        <li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
                        <li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
                        <li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
                        <li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
                        <li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
                        <li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
                        <li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
                        <li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
                        <li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
                        <li>styles/images: contains images referenced in the stylesheet files</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    
    </html>

    Also, more details you could find in the API Documentation page.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    pk
    Participant

    I am not using any other widgets. Just jqxDockingLayout (for now).
    Does the following picture explain better what I am trying to do?

    https://imgur.com/a/kEI2BYm

    • This reply was modified 1 week, 3 days ago by  pk.
    • This reply was modified 1 week, 3 days ago by  pk.

    Hristo
    Participant

    Hello Samiran,

    Thank you for this example.
    You could use the mentioned from me a scenario and also, include the additional widgets as I described before.
    At some stage, you need to use it.
    The jqxSplitter will be useful to separate the content into two sections.
    Please, take a look at this example:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <title id="Description">This demo shows 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.</title>
        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <style type="text/css">
            .jqx-layout-group-auto-hide-content-vertical {
                width: 200px;
            }
    
            .no-border {
                border-left-width: 0;
                border-right-width: 0;
            }
    
            .jqx-ribbon-content-section {
                overflow: hidden;
            }
        </style>
        <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxribbon.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxlayout.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdockinglayout.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxsplitter.js"></script>
        <script type="text/javascript" src="../../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // the "layout" JSON array defines the internal structure of the docking layout
                var layout = [{
                    type: "layoutGroup",
                    orientation: "horizontal",
                    items: [
                        {
                            type: "tabbedGroup",
                            width: "30%",
                            items: [{
                                type: "layoutPanel",
                                title: "Column A",
                                contentContainer: "DocumentAPanel"
                            }]
                        },
                        {
                            type: "layoutGroup",
                            orientation: "vertical",
                            width: "40%",
                            items: [
                                {
                                    type: "documentGroup",
                                    height: "100%",
                                    minHeight: "20%",
                                    items: [
                                        {
                                            type: "documentPanel",
                                            title: "Tab A",
                                            contentContainer: "TabA",
                                            initContent: function () {
                                                $("#splitterTabA").jqxSplitter({ width: "100%", height: "100%", orientation: "horizontal" });
                                            }
                                        },
                                        {
                                            type: "documentPanel",
                                            title: "Tab B",
                                            contentContainer: "TabB",
                                            initContent: function () {
                                                $("#splitterTabB").jqxSplitter({ width: "100%", height: "100%", orientation: "horizontal", panels: [{ size: 150 }, { size: 250 }] });
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            type: "tabbedGroup",
                            width: "30%",
                            items: [{
                                type: "layoutPanel",
                                title: "Document C",
                                contentContainer: "DocumentCPanel"
                            }]
                        }
                    ]
                }];
    
                $("#dockingLayout").jqxDockingLayout({ width: getWidth("dockingLayout"), height: 600, layout: layout });
            });
        </script>
    </head>
    
    <body>
        <div id="dockingLayout">
            <div data-container="DocumentAPanel">
                Document A content
            </div>
            <div data-container="TabA">
                <!-- Content TabA -->
                <div id="splitterTabA" class="no-border">
                    <div class="splitter-panel">
                        SECTION-A
                    </div>
                    <div class="splitter-panel">
                        SECTION-B
                    </div>
                </div>
            </div>
            <div data-container="TabB">
                <!-- Content TabB -->
                <div id="splitterTabB" class="no-border">
                    <div class="splitter-panel">
                        SECTION-C
                    </div>
                    <div class="splitter-panel">
                        SECTION-D
                    </div>
                </div>
            </div>
            <div data-container="DocumentCPanel">
                Document C content
            </div>
        </div>
    </body>
    
    </html>

    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    • This reply was modified 1 week, 2 days ago by  Hristo.

    pk
    Participant

    Thank you Hristo. The use of jqx-splitter is a nice suggestion, but in this way I lose the “drag&drop” functionality of jqxDockingLayout (What if I want to drop content inside “Section-B” for example?)
    So, am I correct to assume that this layout isn’t possible with jqxDockingLayout? If so, may I suggest adding support for nested jqxDockingLayouts? That way you’d be able to cover all use cases.


    Hristo
    Participant

    Hello pk,

    Yes, this is a possible solution.
    Meanwhile, I would like to suggest an option from another our library – Smart HTML Elements.
    Especially, the Smart DockingLayout I think it is a little bit more flexible.
    Please, take a look at this demo:
    https://www.htmlelements.com/demos/docking-layout/drop-position/
    Please let me know if you have any other questions.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.