1

I wanted to know if I its possible to create a right click context menu which is activated on jqGrid's header row and has ability to add column to right or left or the column in question or hide the current column (without using ui-multiselect).

Any code in this respect would greatly be appreciated.

chugh97
  • 9,602
  • 25
  • 89
  • 136

1 Answers1

0

I suggest that you use contextmenu plugin which you would find in the plugins/jquery.contextmenu.js of jqGrid. In the answer and in this one for example are described how it could be used inside of jqGrid body. With the following code you can use it in the column header too:

var cm = $grid.jqGrid("getGridParam", "colModel");
$("th.ui-th-column").contextMenu('myMenu1', {
    bindings: {
        columns: function(trigger) {
            var $th = $(trigger).closest("th");
            if ($th.length > 0) {
                alert("the header of the column '" + cm[$th[0].cellIndex].name +
                    "' was clicked");
            }
        }
    },
    // 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'
    }
});

where menu myMenu1 are defined as

<div class="contextMenu" id="myMenu1" style="display:none">
    <ul style="width: 200px">
        <li id="columns">
            <span class="ui-icon ui-icon-calculator" style="float:left"></span>
            <span style="font-size:11px; font-family:Verdana">Choose columns</span>
        </li>
    </ul>
</div>

The demo demonstrate how it could be used:

enter image description here

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • First of all thanks a lot for your answer. I was able to get the context menu with your help. I have another related question. My context menu looks like Add Columns to Left - Hidden Col1, Hidden Column 2 (Sub Menu) – chugh97 Jul 02 '12 at 19:33
  • First of all thanks a lot for your answer. I was able to get the context menu with your help. I have another related question. My context menu looks like "Add Columns to Left" - Hidden Col1, Hidden Column 2 (Sub Menu) Second Menu is "Add Columns to Right" - Hidden Col1, Hidden Col2 (Sub Menu). When I right click a column , I want to be able to add a hidden column to left or right of the column or hide the current column.I'm able to do this using the code jqGrid uses in rempaColumns using permutation array but if I show hide a few times all things go out of sync and the colModel does't refresh. – chugh97 Jul 02 '12 at 19:40
  • @chugh97: You can't add a column to the grid. At least it's very complex and it can't be done with the standard jqGrid methods. If some hidden columns are already exist you can change the order of columns and make the existing hidden column before or after the current column, but I don't understand the reason of this. You can access the hidden column by name and not by index. In the case the order of the column will be not important. – Oleg Jul 02 '12 at 19:50
  • @chugh97: If you need a working example which uses `remapColumns` you can find it [here](http://stackoverflow.com/a/8436273/315935) for example. – Oleg Jul 02 '12 at 19:54
  • @chugh97: Sorry, but I am in a business trip (at one customer) since two weeks and stay at least about 4 weeks. So I can't now invest many time to help other jqGrid users. – Oleg Jul 03 '12 at 09:10
  • @Oleg Is there any way that by default hidden column should not appear in context menu ? – Milan May 12 '16 at 13:03
  • @Milan: The answer is very old. Moreover I don't full understand your question. Look at [the answer](http://stackoverflow.com/a/29374787/315935) where I described `showHideColumnMenu` method. – Oleg May 12 '16 at 13:18
  • @Oleg No, No you don't get it properly, Actually i have some columns in my jqGrid that are by default hidden and used for some conditions. I want functionality like, those columns which are hidden by default should not show up in context menu and **rest columns** should appear. And then i should be able to perform hide/show column operations on those **rest columns**. – Milan May 12 '16 at 13:39
  • @Milan: You repeat writing about the "context menu" without explaining what context menu you mean exactly and how you build it. The current answer where you post the comments just display one menu with the text "Choose columns". It displays `alert` on click on the menu item. I think that you implemented some behavior for filling the context menu, which you should first explain before I can help you. It's better that you post new question. By the way one don't need typically to create hidden columns if you don't want to show there (at least if one doesn't use some old jqGrid version). – Oleg May 12 '16 at 14:51
  • hi @Oleg got the solution from one of your answers that was **hidedlg: true** means don't display in columnCooser. here is the [link](http://stackoverflow.com/questions/16297009/struts2-jquery-grid-gridcolumn-field-is-displayed-in-dialog-although-using-hided) Thanks again – Milan May 13 '16 at 05:43
  • @Milan: The option `hidedlg: true` helps only for `columnCooser`, which you never mention before. Moreover the usage of hidden columns, which are never visible should be avoid because such columns reduce the performance of the HTML page. **The solution depend on other options which you use (`datatype`, `loadone`), version and the fork of jqGrid which you use.** I implemented for example `additionalProperties` option in [free jqGrid](https://github.com/free-jqgrid/jqGrid), which could be used to replace hidden columns. It was the reason why I suggested you to ask separate question with details – Oleg May 13 '16 at 06:37