jQuery UI Widgets Forums Grid right click on empty grid

This topic contains 3 replies, has 4 voices, and was last updated by  Dimitar 8 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • right click on empty grid #76378


    I want to open my context-menu on right-click over my grid.

    .on(‘rowclick’, function (event) {
    if (event.args.rightclick) {
    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;

    everything works fine except when I have an empty grid (No data to display). And I think that’s what it´s expected.

    How can I force that anyway ?

    right click on empty grid #76426


    Hello omargarro,

    There is no exposed method from the widget to trigger on empty rows, however you can bind to a regular click event on the grid and check if it is clicked on an empty row.
    Here is an example:

    $('#jqxgrid').on('click', function (event) {
        if ($(event.target).hasClass('jqx-grid-cleared-cell')){
        	// enter code to handle empty row click

    Or if you want the same code to handle clicks on all rows (empty or not) you can check for the jqx-grid-cell class:

    $('#jqxgrid').on('click', function (event) {
        if ($(event.target).hasClass('jqx-grid-cell')){
        	// enter code to handle any row click

    The check for target is needed, as otherwise the code would trigger when you click on scrollers and headers as well, so it is up to you to decide where you want to trigger it.

    Best Regards,

    jQWidgets Team

    right click on empty grid #80006


    Empty Grid right click event not get triggered for the contest menu. hasClass() method is not get triggered in empty grid.

    right click on empty grid #80014


    Hello Siva,

    Please refer to the following example:

    <!DOCTYPE html>
    <html lang="en">
        <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/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxgrid").on('contextmenu', function () {
                    return false;
                var data = generatedata(0);
                var source = {
                    localdata: data,
                    datafields: [{
                        name: 'firstname',
                        type: 'string'
                    }, {
                        name: 'lastname',
                        type: 'string'
                    }, {
                        name: 'productname',
                        type: 'string'
                    }, {
                        name: 'date',
                        type: 'date'
                    }, {
                        name: 'quantity',
                        type: 'number'
                    }, {
                        name: 'price',
                        type: 'number'
                    datatype: "array"
                var adapter = new $.jqx.dataAdapter(source);
                    width: 500,
                    theme: 'energyblue',
                    height: 300,
                    source: adapter,
                    ready: function () {
                        $('#jqxgrid').on('mousedown', function (event) {
                            if (event.which === 3 && $(event.target).hasClass('jqx-grid-empty-cell')) {
                                alert('Right-clicked empty grid.');
                    columns: [{
                        text: 'First Name',
                        datafield: 'firstname',
                        width: 90
                    }, {
                        text: 'Last Name',
                        datafield: 'lastname',
                        width: 90
                    }, {
                        text: 'Product',
                        datafield: 'productname',
                        width: 170
                    }, {
                        text: 'Order Date',
                        datafield: 'date',
                        width: 160,
                        cellsformat: 'dd-MMMM-yyyy'
                    }, {
                        text: 'Quantity',
                        datafield: 'quantity',
                        width: 80,
                        cellsalign: 'right'
                    }, {
                        text: 'Unit Price',
                        datafield: 'price',
                        cellsalign: 'right',
                        cellsformat: 'c2'
    <body class='default'>
        <div id="jqxgrid">

    We hope it is helpful to you.

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.