jQuery UI Widgets Forums Layouts Layout and Docking Layout Modifying Layout properties

This topic contains 6 replies, has 3 voices, and was last updated by  Dimitar 2 years, 6 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Modifying Layout properties #83270

    Gary
    Participant

    Is there a recommended way to update settings in the jqxLayout.layout property after jqxLayout is rendered?

    I’m currently looking at handling resize events by adjusting the width or height of groups. A previous question also asked if the title of a panel could be changed via the properties. Another scenario would be the ability to add new panels to the layout.

    Currently, if I try to simply set the overall layout property again, there is an error in the console:

    cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.17/angular.js:11707 TypeError: Cannot read property 'widget' of undefined
        at c (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)
        at a.extend._detachContent (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)
        at a.extend._detachContent (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)
        at a.extend.render (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)
        at a.extend.propertyChangedHandler (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)
        at Object.a.jqx.setvalueraiseevent (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)
        at Array.<anonymous> (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)
        at Function.m.extend.each (cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js:2)
        at Object.a.jqx.set (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)
        at Object.a.jqx.jqxWidgetProxy (s3.amazonaws.com/nd-cdn/jqx-all-3.9.0.js:7)

    If I try to send an updated layout using loadLayout, the elements in the old layout appear to be destroyed before the updated layout is displayed (rather than just applying the new characteristics to the existing layout).

    Is the correct (only) way to adjust the panel titles and group sizes to adjust the window elements directly rather than through the widget properties?
    Is there any way to add/remove panels from groups?

    Modifying Layout properties #83282

    Dimitar
    Participant

    Hello Gary,

    I would recommend first getting the layout property, modifying it and finally calling the render method, as in the following example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <style type="text/css">
            .jqx-layout-group-auto-hide-content-vertical
            {
                width: 200px;
            }
        </style>
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxlayout.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.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 layout
                var layout = [{
                    type: 'layoutGroup',
                    orientation: 'horizontal',
                    items: [{
                        type: 'autoHideGroup',
                        alignment: 'left',
                        width: 80,
                        unpinnedWidth: 200,
                        items: [{
                            type: 'layoutPanel',
                            title: 'Toolbox',
                            contentContainer: 'ToolboxPanel'
                        }, {
                            type: 'layoutPanel',
                            title: 'Help',
                            contentContainer: 'HelpPanel'
                        }]
                    }, {
                        type: 'layoutGroup',
                        orientation: 'vertical',
                        width: 500,
                        items: [{
                            type: 'documentGroup',
                            height: 400,
                            minHeight: 200,
                            items: [{
                                type: 'documentPanel',
                                title: 'Document 1',
                                contentContainer: 'Document1Panel'
                            }, {
                                type: 'documentPanel',
                                title: 'Document 2',
                                contentContainer: 'Document2Panel'
                            }]
                        }, {
                            type: 'tabbedGroup',
                            height: 200,
                            pinnedHeight: 30,
                            items: [{
                                type: 'layoutPanel',
                                title: 'Error List',
                                contentContainer: 'ErrorListPanel'
                            }, {
                                type: 'layoutPanel',
                                title: 'Output',
                                contentContainer: 'OutputPanel',
                                selected: true
                            }]
                        }]
                    }, {
                        type: 'tabbedGroup',
                        width: 220,
                        minWidth: 200,
                        items: [{
                            type: 'layoutPanel',
                            title: 'Solution Explorer',
                            contentContainer: 'SolutionExplorerPanel',
                            initContent: function ()
                            {
                                // initialize a jqxTree inside the Solution Explorer Panel
                                var source = [{
                                    icon: '../../images/earth.png',
                                    label: 'Project',
                                    expanded: true,
                                    items: [{
                                        icon: '../../images/folder.png',
                                        label: 'css',
                                        expanded: true,
                                        items: [{
                                            icon: '../../images/nav1.png',
                                            label: 'jqx.base.css'
                                        }, {
                                            icon: '../../images/nav1.png',
                                            label: 'jqx.energyblue.css'
                                        }, {
                                            icon: '../../images/nav1.png',
                                            label: 'jqx.orange.css'
                                        }]
                                    }, {
                                        icon: '../../images/folder.png',
                                        label: 'scripts',
                                        items: [{
                                            icon: '../../images/nav1.png',
                                            label: 'jqxcore.js'
                                        }, {
                                            icon: '../../images/nav1.png',
                                            label: 'jqxdata.js'
                                        }, {
                                            icon: '../../images/nav1.png',
                                            label: 'jqxgrid.js'
                                        }]
                                    }, {
                                        icon: '../../images/nav1.png',
                                        label: 'index.htm'
                                    }]
                                }];
    
                                $('#solutionExplorerTree').jqxTree({ source: source, width: 190 });
                            }
                        }, {
                            type: 'layoutPanel',
                            title: 'Properties',
                            contentContainer: 'PropertiesPanel'
                        }]
                    }]
                }];
    
                $('#jqxLayout').jqxLayout({ width: 800, height: 600, layout: layout });
    
                $('#changeTitle').jqxButton();
                $('#changeTitle').click(function ()
                {
                    var currentLayout = $('#jqxLayout').jqxLayout('layout');
                    currentLayout[0].items[2].items[0].title = 'UPDATED TITLE';
                    $('#jqxLayout').jqxLayout('render');
                });
            });
        </script>
    </head>
    <body>
        <div id="jqxLayout">
            <!--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="Document1Panel">
                Document 1 content</div>
            <div data-container="Document2Panel">
                Document 2 content</div>
            <!--bottom tabbedGroup-->
            <div data-container="ErrorListPanel">
                List of errors</div>
            <div data-container="OutputPanel">
                Output</div>
            <!--right tabbedGroup-->
            <div data-container="SolutionExplorerPanel">
                <div id="solutionExplorerTree" style="border: none;">
                </div>
            </div>
            <div data-container="PropertiesPanel">
                List of properties</div>
        </div>
        <br />
        <button id="changeTitle">
            Change the title of "Solution Explorer"</button>
    </body>
    </html>

    You can remove panels via the context menu (you can see it in the demo Dashboard). For dynamic adding of groups/panels you can use jqxDockingLayout and its addFloatGroup method (example).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Modifying Layout properties #83298

    Gary
    Participant

    Hi Dimitar,

    Thanks for the quick reply.

    Just to verify I understand the approach: if I access the layout property of the jqxLayout, I’ll be working with a live reference. Therefore, any changes to that JSON object modify the internal representation of the object. ‘render’ can then be used to update the rendering of the object against the updated JSON.

    Also, one additional question. A few months ago, JQWidgets changed how examples are handled to no longer support the use of a fiddle platform. I imagine this was for copy protection, but it has made it difficult to “fiddle” with examples to fully explore the controls. Is it still possible to “fiddle” with the examples in some way? (We have purchased the software, but have the libraries on a private server.)

    Best Regards,
    -Gary Geniesse

    Modifying Layout properties #83376

    Dimitar
    Participant

    Hi Gary,

    You are correct in your understanding about the layout property.

    If you are referring to the Try it examples in the widgets API documentations, many of them are now hosted on the jsEditor platform. You are free (and even encouraged) to create an account there and modify and copy our existing examples as well as create your own. To register an account, click Login/Sign up in the top right corner and then Create new account in the pop-up.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Modifying Layout properties #95845

    sd#j.prizal
    Participant

    Adding panels to layout.
    Extend the jqxlayout object.

    
    <script>
        $.extend($.jqx._jqxLayout.prototype, {
            // dynamically adds a new floatGroup
            __addPanel: function (groupToAdd, childObject) {
                var base = this;
                childObject.parent = groupToAdd;
                groupToAdd.items.push(childObject);
    
                base._rendered=false;
                base._createLayout(groupToAdd.items, groupToAdd.widget, groupToAdd);
                base._rendered=true;
                base.render();
            },
        });
    </script>
    

    Then call your extended method like this.

    
    // Depending on your code you can call like this.
    this.jqx('__addPanel', this.groups.CallRegistryGroup, new CallRegistryPanel(title) );
    // or
    $("#jqxLayout").jqxLayout('__addPanel', this.groups.CallRegistryGroup, new CallRegistryPanel(title) );
    // or
    // contentContainer should be an already added dom element because they look for [data-container], if not you must change to content: "<div class='panel-content'></div>"
    $("#jqxLayout").jqxLayout('__addPanel', this.groups.CallRegistryGroup, {title:'new Panel', type:'layoutPanel', contentContainer: 'CallRegistryPanel', initContent:function(){ alert('initializing components'); } );
    
    // this.groups.CallRegistryGroup represents the group layout where you wanna add the new panel.
    // Which means e.g .
    // var layout = $("#jqxLayout").jqxLayout('layout');
    // var group = layout.items[0]; // This represents autoHideGroup for example
    // new CallRegistryPanel(title) - Should be the new item not initialized like layoutPanel
    // $("#jqxLayout").jqxLayout('__addPanel', group, new CallRegistryPanel(title) );
    

    I’ve made this and its working, so far…
    If anyone needs an fiddle I can make one.

    Modifying Layout properties #95847

    sd#j.prizal
    Participant

    I’ve made this fiddle. https://jsfiddle.net/jrppl89/UbK74/1139/

    Modifying Layout properties #95931

    Dimitar
    Participant

    Hello sd#j.prizal,

    Thank you for your contribution.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.