jQuery Grid Plugin - jqGrid

Hello Tony,

I decide to post here my modification of the jquery.contextmenu.js to share it with another people who use it in combination with jqGrid. I described the code in my previous answers about jqGrid on the stackoverflow.com, for example here. I will post in the separate feature request which describes the extention method which generates context menu from the navigator buttons. In the current feature request I want describe only the changes of jquery.contextmenu.js.

I tried to use the  existing CSS classes of jQuery UI 1.8.x: ui-menu and ui-menu-item, the classes ui-widget, ui-widget-content, ui-corner-all, ui-widget-shadow and ui-state-hover. Then I added the class ui-menu-icons which will be used in jQuery UI 1.9. I tried to make code so, that it allowes enough flexibility. The aim was to use new jQuery UI Menu Widget in thze future, but first to use existing jquery.contextmenu.js code till jQuery UI 1.9 will be released.

Another aim was to make the code working not only for jQuery UI 1.8.x, but for jQuery UI 1.9 too. So that the first attempts to use jQuery UI 1.9 can be made without requirements to change the code of contextmenu to new jQuery UI menu. The problem was that in the version jQuery UI 1.8.x it was used float: left style actively but in the jQuery UI 1.9 it will be used position: absolute instead. I solved the problem by setting explicitly some 1.9-like styles inline additionaly to adding CSS classes. As the result the produced HTML code will be not perfect (it uses not only CSS classes), but it works very good with both jQuery UI 1.8.x and with jQuery UI 1.9. One minor issue can be fixed by defining

which already exist in jQuery UI 1.8.x, but removed in the current version of jQuery UI 1.9.

The menus items should use <a> to be in the style of jQuery UI:

even if there not uses icons

The new version of jquery.contextmenu.js you can get here (I changed the file name to jquery.contextmenu-ui.js). You can include it in the plugins directory of jqGrid.

I created some simple demos based on an old my demo which used jQuery UI Autocomplete. The reason of this was that I wanted to verify that all the changes in the contextmenu plugin do no problems for jQuery UI Autocomplete which uses the same menu classes.

As the demos I used the first and the second demo where I used jQuery UI 1.8.16. The second demo used no icons in the context menu. The next two demos this and this are modification of the previous demos where some jQuery UI 1.8.16 classes will be overwritten with new style settings from jQuery UI 1.9. The demos shows that jQuery UI Autocomplete still works correctly. The last demo uses the last version of jQuery UI 1.9 directly from github: jquery-ui-git.css and jquery-ui-git.js. The demo still work.

I hope that the usage of the modified version of jquery.contextmenu.js can be helpful for other.

Like I wrote before I will post additionally an jqGrid plugin which construct dynamically context menu based the navigator buttons (from navGrid or inlineNav).

Best regards
Oleg