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

Answer 1

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.