Hiding Context Menu in Grid

[DeeCanMember]

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;
            }

[Peter StoevKeymaster]

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/

[DeeCanMember]

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;
            });

[Dave_1Participant]

hi

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

[Peter StoevKeymaster]

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/

[Author]

Posts