jqxTreeGrid Context Menu - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: contextmenu, getselectedrowindex, getSelection, grid, jqxgrid, jqxTreeGrid, tree grid, treegrid

This topic contains 2 replies, has 2 voices, and was last updated by jqwidgetsdev 11 years, 2 months ago.

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

Author

jqxTreeGrid Context Menu Posts

December 31, 2013 at 1:43 pm jqxTreeGrid Context Menu #47099

Participant

Hello.

I was wondering if there is an equivalent of jqxTreeGrid to http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/contextmenu.htm?arctic. Here I am noticing that getselectedrowindex does not exist in jqxTreeGrid, maybe there is another way someone can suggest?

Thanks.

January 2, 2014 at 11:49 am jqxTreeGrid Context Menu #47132

Dimitar

Participant

Hello jqwidgetsdev,

Here is an example of jqxTreeGrid with a custom context menu:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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" src="../../scripts/demos.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: 680,
                source: dataAdapter,
                pageable: true,
                columnsResize: true,
                ready: function () {
                    // expand row with 'EmployeeKey = 32'
                    $("#treeGrid").jqxTreeGrid('expandRow', 32);
                },
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 150 },
                  { text: 'LastName', dataField: 'LastName', width: 150 },
                  { text: 'Department Name', dataField: 'DepartmentName', width: 150 },
                  { 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;
                }
            });

            $("#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,
Dimitar

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

January 2, 2014 at 8:18 pm jqxTreeGrid Context Menu #47147

jqwidgetsdev

Participant

Thank you very much, Dimitar! The following did the trick:

var rowid = selection[0].uid

Best regards.

Author

Posts

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

You must be logged in to reply to this topic.