How to close documentPanel in jqxDockingLayout by customed context menu

[mgorjiParticipant]

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.

[DimitarParticipant]

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/

[Author]

Posts