jQuery UI Widgets Forums Layouts Layout and Docking Layout How to close documentPanel in jqxDockingLayout by customed context menu

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 2 years, 9 months ago.

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

  • mgorji
    Participant

    Hello,
    Is there any recommendation for close documentPanel in jqxDockingLayout without default context menu?

    I added a custom context menu to jqxDockingLayout when right clicked on the jqxDockingLayout ,and one of the items is Close, i want to close documentPanel by this way.is there any solution for my problem?

    This is my code:

    <div id='jqxWidget'>
        <div id="tabsWidget">
            <ul style="margin-left: 10px;">
                <li>Tab1</li>
            </ul>
            <div style="text-align: right;">
                <div id="jqxDockingLayout">
                    <!--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>
                    <!--right tabbedGroup-->
                    <div data-container="SolutionExplorerPanel">
                        Solution structure
                    </div>
                    <!--floatGroup-->
                    <div data-container="OutputPanel">
                        Output
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div id='jqxWidgetTabContextMenu'>
        <ul>
            <li onclick="closeWidgetTab()"><a href="#">Close</a></li>
            <li"><a href="#">Maximize</a></li>
            <li"><a href="#">Open In New Window</a></li>
            <li"><a href="#">Settings</a></li>
        </ul>
    </div>
    
    <script>
         var layout =
              [{ type: 'layoutGroup',
                orientation: 'horizontal',
                items: [ {
                    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: 300,
                        pinnedHeight: 30,
                        items: [{
                            type: 'layoutPanel',
                            title: 'Error List',
                            contentContainer: 'ErrorListPanel'
                        }]
                    }]
                }, {
                    type: 'tabbedGroup',
                    width: 220,
                    minWidth: 200,
                    items: [{
                        type: 'layoutPanel',
                        title: 'Solution Explorer',
                        contentContainer: 'SolutionExplorerPanel'
                    }, {
                        type: 'layoutPanel',
                        title: 'Properties',
                        contentContainer: 'PropertiesPanel'
                    }]
                }]
        }];
    
        $('#jqxDockingLayout').jqxDockingLayout({ width: '100%', height: 762, layout: layout });
    
        var contextMenu = $("#jqxWidgetTabContextMenu").jqxMenu({ width: '120px', height: '110px', autoOpenPopup: false, mode: 'popup' });
                $("#jqxWidget").mousedown(function (event) {
                    var targetElement = event.target;
    
                    // detect widget tabs(active & selected)
                    if (targetElement.hasAttribute('unselectable') & targetElement.className.indexOf('jqx-ribbon-item-selected') > -1){
                        var rightClickOnTab = isRightClickOnTab(event);
                        if (rightClickOnTab) {
                            disableDefaultBrowserContextMenu();
                            var scrollTop = $(window).scrollTop();
                            var scrollLeft = $(window).scrollLeft();
                            contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
                            return false;
                        }
                    }
                });
    
                function disableDefaultBrowserContextMenu(){
                    $(document).bind('contextmenu', function (e) {
                        return false;
                    });
                }
    
                function isRightClickOnTab(event) {
                    var rightclick;
                    if (!event) var event = window.event;
                    if (event.which) rightclick = (event.which == 3);
                    else if (event.button) rightclick = (event.button == 2);
                    return rightclick;
                }
    </script>

    And another question,is there any way to extend default context menu of jqxDockingLayout?
    For exm : adding several items that mentioned in my custom context menu

    Thanks.

    • This topic was modified 2 years, 9 months ago by  mgorji.

    Dimitar
    Participant

    Hello mgorji,

    1. Unfortunately, the only supported way of closing a documentPanel is via the built-in context menu.
    2. There is also no way of extending the default context menu. We are sorry for the inconvenience.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.