jQuery UI Widgets Forums Navigation Menu, Context Menu Hiding Context Menu in Grid

Tagged: , ,

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Hiding Context Menu in Grid #22985

    DeeCan
    Member

    Hi All,

    I have CRUD grid application where I want to implement a context menu to enable user to select a custom rendering of a given cell. The context menu should be displayed only in the cell edit mode as follows:

    1. User triggers event : begincelledit.
    2. Context menu is defined for user to access in celledit mode
    3. User triggers event : endcelledit
    4. context menu is not displayed any more on right click. (not just disabled)

    Can someone suggesting how to implement step 4 ?

    				$("#jqxgrid").on('cellbeginedit', function (event) {
    $("#jqxMenu").jqxMenu({ width: '120px', height: '140px',
    autoOpenPopup: false, mode: 'popup'
    });
    // open the context menu when the user presses the mouse right button.
    $("#jqxWidget").on('mousedown', function (event) {
    var rightClick = isRightClick(event);
    if (rightClick) {
    var scrollTop = $(window).scrollTop();
    var scrollLeft = $(window).scrollLeft();
    $("#jqxMenu").jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
    return false;
    }
    });
    })
    $("#jqxgrid").on('cellendedit', function (event) {
    //$("#jqxMenu").jqxMenu({ disabled: 'true' });
    // $("#jqxMenu").jqxMenu('destroyed');
    });
    // disable the default browser's context menu.
    $("#jqxgrid").on('contextmenu', function (e) {
    return false;
    });
    function isRightClick(event) {
    var rightclick;
    if (!event) var event = window.event;
    if (event.which) rightclick = (event.which == 3);
    else if (event.button) rightclick = (event.button == 2);
    return rightclick;
    }
    Hiding Context Menu in Grid #23013

    Peter Stoev
    Keymaster

    Hi,

    According to me, in your scenario you should set Boolean flag in the “cellbeginedit” and “cellendedit” event handlers. On right click, check the flag’s value and “open” or not the Context Menu. The Context Menu should be initialized just once, and I think that should be outside the Grid as in our sample.

    Best Regards,
    Peter Stoev

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

    Hiding Context Menu in Grid #23053

    DeeCan
    Member

    Thanks a lot for your suggestion, Peter. I got it to behave as desired using an extra variable.

                var MenuFlag = new Boolean(false);
    //CELL BEGIN EDIT:
    $("#jqxgrid").on('cellbeginedit', function (event) {
    var columnname = args.datafield;
    alert("Enter cell edit: " + columnname);
    if (columnname == "ABC") {
    MenuFlag = true; }
    alert("MenuFlag : " + MenuFlag);
    });
    //CELL END EDIT
    $("#jqxgrid").on('cellendedit', function (event) {
    var columnname = args.datafield;
    MenuFlag = false;
    alert("End cell edit: " + columnname);
    alert("MenuFlag : " + MenuFlag);
    });
    //DEFINE MENU
    $("#jqxMenu").jqxMenu({ width: '120px', height: '140px',
    autoOpenPopup: false, mode: 'popup', disabled: 'true'
    });
    $("#jqxWidget").on('mousedown', function (event, Menuflag) {
    var rightClick = isRightClick(event);
    if (rightClick && MenuFlag) {
    var scrollTop = $(window).scrollTop();
    var scrollLeft = $(window).scrollLeft();
    $("#jqxMenu").jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
    return false;
    }
    });
    function isRightClick(event) {
    var rightclick;
    if (!event) var event = window.event;
    if (event.which) rightclick = (event.which == 3);
    else if (event.button) rightclick = (event.button == 2);
    return rightclick;
    }
    // disable the default browser's context menu.
    $("#jqxgrid").on('contextmenu', function (e) {
    return false;
    });
    Hiding Context Menu in Grid #80174

    Dave_1
    Participant

    hi

    i wanted to hide 3rd menu item on context menu, using grid column condition/values

    • This reply was modified 8 years, 3 months ago by  Dave_1.
    Hiding Context Menu in Grid #80240

    Peter Stoev
    Keymaster

    Hi Dave_1,

    By using jQuery’s hide method, you can hide any HTML Element.

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.