TreeGrid with context jqxMenu won't close menu - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: close, jqxTreeGrid, left mouse button, open, right mouse button, rowclick, treegrid

This topic contains 2 replies, has 2 voices, and was last updated by dpibt 9 years, 10 months ago.

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

Author

TreeGrid with context jqxMenu won't close menu Posts

April 23, 2015 at 8:11 am TreeGrid with context jqxMenu won't close menu #70173

dpibt

Participant

Hi,

We are doing a functionality like this example of yours:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/javascript-tree-grid-context-menu.htm

We’d like that once you’ve opened the contextual menu by right clicking on a row, the contextual menu closed when you left click on any row of the tree grid. Is it possible?

Thank you

April 23, 2015 at 10:03 am TreeGrid with context jqxMenu won't close menu #70176

Nadezhda

Participant

Hello dpibt,

Please, find the following example which contains possible solution. I hope it would be helpful to you.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <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/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "csv",
                dataFields: [
                    { name: 'EmployeeKey', type: 'number' },
                    { name: 'ParentEmployeeKey', type: 'number' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' },
                    { name: 'Phone', type: 'string' },
                    { name: 'Gender', type: 'string' },
                    { name: 'DepartmentName', type: 'string' }
                ],
                hierarchy:
                {
                    keyDataField: { name: 'EmployeeKey' },
                    parentDataField: { name: 'ParentEmployeeKey' }
                },
                id: 'EmployeeKey',
                url: '../sampledata/employeesadv.csv'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create Tree Grid
            $("#treeGrid").jqxTreeGrid(
            {
                width: 850,
                source: dataAdapter,
                columnsResize: true,
                ready: function () {
                    // expand row with 'EmployeeKey = 32'
                    $("#treeGrid").jqxTreeGrid('expandRow', 32);
                },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
                  { text: 'LastName', dataField: 'LastName', width: 200 },
                  { text: 'Department Name', dataField: 'DepartmentName', width: 200 },
                  { text: 'Title', dataField: 'Title', width: 300 },
                  { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
                  { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
                  { text: 'Phone', dataField: 'Phone', cellsFormat: 'd', width: 120 }
                ]
            });

            // create context menu
            var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup' });

            $("#treeGrid").on('contextmenu', function () {
                return false;
            });

            $("#treeGrid").on('rowClick', function (event) {
                var args = event.args;
                if (args.originalEvent.button == 2) {
                    var scrollTop = $(window).scrollTop();
                    var scrollLeft = $(window).scrollLeft();
                    contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                    return false;
                }
                else if (args.originalEvent.button == 0) {
                    contextMenu.jqxMenu('close', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                    return false;                
                }
            });

            $("#Menu").on('itemclick', function (event) {
                var args = event.args;
                var selection = $("#treeGrid").jqxTreeGrid('getSelection');
                var rowid = selection[0].uid
                if ($.trim($(args).text()) == "Edit Selected Row") {
                    $("#treeGrid").jqxTreeGrid('beginRowEdit', rowid);
                } else {
                    $("#treeGrid").jqxTreeGrid('deleteRow', rowid);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="treeGrid">
    </div>
    <div id='Menu'>
        <ul>
            <li>Edit Selected Row</li>
            <li>Delete Selected Row</li>
        </ul>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

April 24, 2015 at 8:49 am TreeGrid with context jqxMenu won't close menu #70228

dpibt

Participant

Thanks, it works perfectly!

Author

Posts

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

You must be logged in to reply to this topic.