jQWidgets Forums

jQuery UI Widgets › Forums › DataTable › How to Add Context Menu to jqxDataTable?

Tagged: , ,

This topic contains 3 replies, has 2 voices, and was last updated by  Nadezhda 10 years, 7 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    How to Add Context Menu to jqxDataTable? Posts
  • September 13, 2014 at 2:48 pm How to Add Context Menu to jqxDataTable? #59490

    jqwidgetsdev
    Participant

    Hello.

    I was wondering how to make a context menu (jqxMenu) appear for jqxDataTable a right click mouse down event?

    I will be having different context menus based on the specific column. Is there a way to determine on which column the mouse was clicked?

    Your guidance is appreciated.

    Best regards.

    September 15, 2014 at 8:12 am How to Add Context Menu to jqxDataTable? #59511

    Nadezhda
    Participant

    Hello jqwidgetsdev,

    Please, find below an example which shows how to use Context Menu in jqxDataTable:

    <!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.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/jqxmenu.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var url = "../demos/sampledata/employees.xml";          
            var source =
            {
                dataType: "xml",
                dataFields: [
                    { name: 'EmployeeID', type: 'number' },
                    { name: 'ReportsTo', type: 'number' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'City', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'HireDate', type: 'date' },
                    { name: 'BirthDate', type: 'date' }
                ],
                hierarchy:
                {
                    keyDataField: { name: 'EmployeeID' },
                    parentDataField: { name: 'ReportsTo' }
                },
                id: 'EmployeeID',
                root: 'Employees',
                record: 'Employee',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create Tree Grid
            $("#dataTable").jqxDataTable(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                columnsResize: true,                
                columns: [
                  { text: 'FirstName', dataField: 'FirstName', minWidth: 100, width: 200 },
                  { text: 'LastName', dataField: 'LastName', width: 200 },
                  { text: 'Title', dataField: 'Title', width: 300 },
                  { text: 'Address', dataField: 'Address', width: 200 },
                  { text: 'City', dataField: 'City', width: 150 },
                  { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
                  { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 }
                ]
            });     

            // create context menu
            var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup' });
            $("#dataTable").on('contextmenu', function () {
                return false;
            });
            $("#dataTable").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;
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable">
    </div>
    <div id='Menu'>
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </div>
</body>
</html>

    There is no way to determine on which column the mouse was clicked.

    Best Regards,
    Nadezhda

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

    September 15, 2014 at 6:53 pm How to Add Context Menu to jqxDataTable? #59534

    jqwidgetsdev
    Participant

    Thank you Nadezhda, for showing the way.

    In that case, may I please request this behaviour be added in a future version?

    Thanks again.

    September 16, 2014 at 6:53 am How to Add Context Menu to jqxDataTable? #59540

    Nadezhda
    Participant

    Hi jqwidgetsdev,

    Using ContextMenu with jqxDataTable is the same as with jqxGrid. We will consider whether to add or not such example in jqxDataTable’s demos section in the future. For now, use my sample as a solution.

    Best Regards,
    Nadezhda

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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.