jQuery UI Widgets Forums Navigation Menu, Context Menu Position Of context Menu

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Position Of context Menu #51537

    anandbabu
    Participant

    Hi ,
    I am using Keyboard navigation grid, on right click of each cell in grid i want to show customized context menu containing insert, update , delete menu items.In that if i right click on last cell, context menu is hiding because that cell in right bottom corner of the web page. (i.e) my x position is 1050 and my y position is 860.so how to show context menu menu within the page.

    Position Of context Menu #51539

    Dimitar
    Participant

    Hello anandbabu,

    Here is a modification of the jqxGrid demo Context Menu. In the example, the menu opens according to the window bounds (note that only the rowclick binding has been changed):

    <!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/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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 () {
                // prepare the data
                var data = generatedata(25);
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        commit(true);
                    },
                    deleterow: function (rowid, commit) {
                        // synchronize with the server - send delete command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        commit(true);
                    }
                };
    
                // initialize the input fields.
                $("#firstName").addClass('jqx-input');
                $("#lastName").addClass('jqx-input');
                $("#product").addClass('jqx-input');
                $("#firstName").width(150);
                $("#firstName").height(23);
                $("#lastName").width(150);
                $("#lastName").height(23);
                $("#product").width(150);
                $("#product").height(23);
    
                if (theme.length > 0) {
                    $("#firstName").addClass('jqx-input-' + theme);
                    $("#lastName").addClass('jqx-input-' + theme);
                    $("#product").addClass('jqx-input-' + theme);
                }
    
                $("#quantity").jqxNumberInput({ width: 150, height: 23, decimalDigits: 0, spinButtons: true });
                $("#price").jqxNumberInput({ symbol: '$', width: 150, height: 23, spinButtons: true });
    
                var dataAdapter = new $.jqx.dataAdapter(source);
                var editrow = -1;
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    source: dataAdapter,
                    pageable: true,
                    autoheight: true,
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 100 },
                      { text: 'Last Name', datafield: 'lastname', width: 100 },
                      { text: 'Product', datafield: 'productname', width: 190 },
                      { text: 'Quantity', datafield: 'quantity', width: 90, cellsalign: 'right' },
                      { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                    ]
                });
    
                // create context menu
                var contextMenu = $("#Menu").jqxMenu({ width: 200, height: 58, autoOpenPopup: false, mode: 'popup' });
    
                $("#jqxgrid").on('contextmenu', function () {
                    return false;
                });
    
                // handle context menu clicks.
                $("#Menu").on('itemclick', function (event) {
                    var args = event.args;
                    var rowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                    if ($.trim($(args).text()) == "Edit Selected Row") {
                        editrow = rowindex;
                        var offset = $("#jqxgrid").offset();
                        $("#popupWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
    
                        // get the clicked row's data and initialize the input fields.
                        var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
                        $("#firstName").val(dataRecord.firstname);
                        $("#lastName").val(dataRecord.lastname);
                        $("#product").val(dataRecord.productname);
                        $("#quantity").jqxNumberInput({ decimal: dataRecord.quantity });
                        $("#price").jqxNumberInput({ decimal: dataRecord.price });
    
                        // show the popup window.
                        $("#popupWindow").jqxWindow('show');
                    }
                    else {
                        var rowid = $("#jqxgrid").jqxGrid('getrowid', rowindex);
                        $("#jqxgrid").jqxGrid('deleterow', rowid);
                    }
                });
    
                $("#jqxgrid").on('rowclick', function (event) {
                    if (event.args.rightclick) {
                        $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
                        var scrollTop = $(window).scrollTop();
                        var scrollLeft = $(window).scrollLeft();
                        var xOffset = 0;
                        var yOffset = 0;
                        var menuWidth = contextMenu.width();
                        var menuHeight = contextMenu.height();
                        var windowWidth = $(window).width();
                        var windowHeight = $(window).height();
                        var eventX = parseInt(event.args.originalEvent.clientX);
                        var eventY = parseInt(event.args.originalEvent.clientY);
    
                        if (eventX + menuWidth > windowWidth) {
                            xOffset = menuWidth;
                        };
                        if (eventY + menuHeight > windowHeight) {
                            yOffset = menuHeight;
                        };
    
                        contextMenu.jqxMenu('open', eventX + 5 + scrollLeft - xOffset, eventY + 5 + scrollTop - yOffset);
    
                        return false;
                    }
                });
    
                // initialize the popup window and buttons.
                $("#popupWindow").jqxWindow({ width: 250, resizable: false, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.01 });
                $("#Cancel").jqxButton({ theme: theme });
                $("#Save").jqxButton({ theme: theme });
    
                // update the edited row when the user clicks the 'Save' button.
                $("#Save").click(function () {
                    if (editrow >= 0) {
                        var row = { firstname: $("#firstName").val(), lastname: $("#lastName").val(), productname: $("#product").val(),
                            quantity: parseInt($("#quantity").jqxNumberInput('decimal')), price: parseFloat($("#price").jqxNumberInput('decimal'))
                        };
                        var rowid = $("#jqxgrid").jqxGrid('getrowid', editrow);
                        $('#jqxgrid').jqxGrid('updaterow', rowid, row);
                        $("#popupWindow").jqxWindow('hide');
                    }
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
            <div style="margin-top: 30px;">
                <div id="cellbegineditevent">
                </div>
                <div style="margin-top: 10px;" id="cellendeditevent">
                </div>
            </div>
            <div id="popupWindow">
                <div>
                    Edit</div>
                <div style="overflow: hidden;">
                    <table>
                        <tr>
                            <td align="right">
                                First Name:
                            </td>
                            <td align="left">
                                <input id="firstName" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                Last Name:
                            </td>
                            <td align="left">
                                <input id="lastName" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                Product:
                            </td>
                            <td align="left">
                                <input id="product" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                Quantity:
                            </td>
                            <td align="left">
                                <div id="quantity">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                                Price:
                            </td>
                            <td align="left">
                                <div id="price">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">
                            </td>
                            <td style="padding-top: 10px;" align="right">
                                <input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel"
                                    type="button" value="Cancel" />
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div id='Menu'>
                <ul>
                    <li>Edit Selected Row</li>
                    <li>Delete Selected Row</li>
                </ul>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Position Of context Menu #51545

    anandbabu
    Participant

    Hi Dimitar,
    Thank you very much its working fine.

    Position Of context Menu #64127

    lucasgraf
    Participant

    This works great, except if you have a sub menu. The sub-menu still draws off the page/screen. Is there any way to force the sub-menu to draw up?
    You can see here how it draws it off the screen.

    Offscreen

    Position Of context Menu #64128

    lucasgraf
    Participant

    Never mind 🙂
    Found this in a sample and it works like a champ.

    $("#taskGridContextMenu").jqxMenu('setItemOpenDirection', 'LinkTasks', 'right', 'up');

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

You must be logged in to reply to this topic.