jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by Hristo 4 years, 9 months ago.

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

Author

How can I create nested layouts inside DocumentPanel? Posts

June 30, 2020 at 12:36 pm How can I create nested layouts inside DocumentPanel? #112337

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?

July 2, 2020 at 7:18 am How can I create nested layouts inside DocumentPanel? #112340

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

July 2, 2020 at 7:38 am How can I create nested layouts inside DocumentPanel? #112341

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

July 3, 2020 at 8:35 am How can I create nested layouts inside DocumentPanel? #112349

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

July 3, 2020 at 10:22 am How can I create nested layouts inside DocumentPanel? #112351

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.

July 6, 2020 at 7:39 am How can I create nested layouts inside DocumentPanel? #112355

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

Author

Posts

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

You must be logged in to reply to this topic.