Custom values to Context Menu Items in JQgrid

Question

I am using this link from Oleg and Demo to create context menu. Is there a way to pass some dynamic values to each row apart from rowId. May be one way is to set hidden values for each row and get those hidden column values but not sure how to implement this functionality. Thanks for any help or suggestions..

    loadComplete: function(data) {
        // Fix the Grid Width...
        fixGridWidth($("#grid"));
        // Context Menu
        $("tr.jqgrow", this).contextMenu('contextMenu', {
            bindings: {
                'abc1': function(trigger) {
        // would like to pass some custom values
                },
                'abc2': function(trigger) {
            // open a link in new window using a hyperlink
                },
                'abc3': function(trigger) {
            // custom logic
                }
            },
            onContextMenu : function(event, menu) {
                //var rowId = $(event.target).parent("tr").attr("id");
                //var grid = $("#grid");
                //grid.setSelection(rowId);                                    
                //return true;                                    
             }
        });

Oleg · Accepted Answer · 2011-12-09T23:04:34.743

2

You can use trigger parameter which has id initialized as the rowid. So you can use getCell or getRowData. For example the abc1 method can be like the following

loadComplete: function () {
    var $this = $(this); // it will be the same like $("#grid")
    $("tr.jqgrow", this).contextMenu('contextMenu', {
        bindings: {
            abc1: function(trigger) {
                var rowData = $(this).jqGrid('getRowData', trigger.id);
                // now you can access any data from the row including
                // hidden columns with the syntax: rowData.colName
                // where colName in the value of 'name' property of
                // the column
            },
            ...
        },
        onContextMenu : function(event, menu) {
            ...
        },
        // next settings 
        menuStyle: {
            backgroundColor: '#fcfdfd',
            border: '1px solid #a6c9e2',
            maxWidth: '600px', // to be sure
            width: '100%' // to have good width of the menu
        },
        itemHoverStyle: {
            border: '1px solid #79b7e7',
            color: '#1d5987',
            backgroundColor: '#d0e5f5'
        }
    });

see here one more demo which uses menuStyle and itemHoverStyle which improve a little the visibility of the context menu. The demo is from the bug request which I recently posted.

edited Dec 09 '11 at 23:04

answered Dec 09 '11 at 22:01

Oleg

220,925
34
403
798

1

Thanks a lot Oleg, you are very helpful. Is it possible to increase the width of contextmenu, for me the text is being wrapped if it's too long. Also is it possible to use a hyperlink for any menu item to directly goto another page(target=_blank) on click of menu item? – varaprakash Dec 09 '11 at 22:20
@varaprakash: Very good question! I tested a little and updated the answer with `width: '100%'` in the `menuStyle` and other parameters. – Oleg Dec 09 '11 at 22:46
@varaprakash: I forgot to mention about [the bug report](http://www.trirand.com/blog/?page_id=393/bugs/small-bug-fixes-in-jquery-contextmenu-js-plugin/#p25321) which I recently posted. My suggestions could be also interesting for you. To open the URL you need just set `window.location`. See [here](http://stackoverflow.com/a/3024278/315935) or [here](http://stackoverflow.com/a/8285665/315935) for example. – Oleg Dec 09 '11 at 23:05
Awesome, working perfectly. Thanks again!!! Regarding new window, I knew I could call a function and say window.open() but it opens a new window/tab for every click where as reloads the previously opened window/tab. That's why I was looking for anchor tag. I was able to solve this issue with window.open(url, 'windowname', '', true) itself by passing true in the last arguement which replaces the history document, that means it reloads in the previously opened window itself. So all is well, thank you :) – varaprakash Dec 09 '11 at 23:25
This is what I did: 'abc1': function(trigger) { openPage(idfromHiddenColumn); }, function openPage(id) { var url = "some_url?id=" + id; window.open(url, 'some_window', '', true); return false; } – varaprakash Dec 09 '11 at 23:28
@varaprakash: You are welcome! About the links I didn't suggested to use `window.open`. I suggested to assign `window.location` like `window.location = 'http://www.google.com/';`. It seems to me that it do what you want. Just test it and place the code `window.location = 'http://www.google.com/';` in the code of `abc2` which you bind. – Oleg Dec 09 '11 at 23:44
@Oleg: how to build context menu automatically from jqGrid top level toolbar? Top level toolbar buttons and button titles can used to create context menu automatically – Andrus Dec 10 '11 at 14:41
@OLeg: I added this as question in http://stackoverflow.com/questions/8457282/how-to-build-jqgrid-context-menu-from-top-level-toolbar – Andrus Dec 10 '11 at 14:51
@varaprakash: [the answer](http://stackoverflow.com/a/8460116/315935) can be interesting for you. – Oleg Dec 10 '11 at 21:49
@Oleg: When I use context menu, hover style disappears on the row. How can I retain the hover style so that user is aware of the fact that right click is for the hovered/highlighted row. Thanks in advance... – varaprakash Jan 09 '12 at 23:17
@varaprakash: The row on which the context menu will be selected and get the style of selected row. So the row has no more the hovering style till another row will be selected. Probably I don't understand what you mean. Could you explain the problem which you has more detailed? – Oleg Jan 09 '12 at 23:25
@Oleg: Posted a question with images. Please [check](http://stackoverflow.com/questions/8796842/jqgrid-how-to-retain-the-hovered-style-when-using-context-menu-for-a-row) here. Thanks... – varaprakash Jan 09 '12 at 23:54
@varaprakash: You can add `ui-state-hover` class manually on the row which hovered during opening of the context menu. Sorry, but I don't have enough time today and in the next two days to write more detailed instructions or the demo. – Oleg Jan 10 '12 at 00:17

Custom values to Context Menu Items in JQgrid

1 Answers1

Linked