jQWidgets Forums

jQuery UI Widgets › Forums › Grid › right click on empty grid

Tagged: , , , , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    right click on empty grid Posts
  • October 2, 2015 at 1:30 pm right click on empty grid #76378

    omargarro
    Participant

    Hi,
    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 ?

    October 5, 2015 at 10:52 am right click on empty grid #76426

    Vladimir
    Participant

    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,
    Vladimir

    jQWidgets Team
    http://www.jqwidgets.com

    January 4, 2016 at 7:58 am right click on empty grid #80006

    Siva
    Participant

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

    January 4, 2016 at 10:47 am right click on empty grid #80014

    Dimitar
    Participant

    Hello Siva,

    Please refer to the following example:

    <!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.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);
            $("#jqxgrid").jqxGrid({
                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'
                }]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

    We hope it is helpful to you.

    Best Regards,
    Dimitar

    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.