jquery - How to change column name in column chooser pop up in jqgrid?

Question

I have a two column header Phase1 & Phase 2(image 1). Now showing the column names(Image 2) in column chooser window

1. Name
2. Category
3. Subcategory
4. Category
5. Subcategory

I want to show differently like

1. Name
2. Ph1 Category
3. Ph1 Subcategory
4. Ph2 Category

5. Ph2 Subcategory

   Note: According to my requirement do not change the column name

       $grid.jqGrid({
           data: mydata,
           datatype: "local",
           colNames:['Name','Category','Subcategory','Category','Subcategory'],
           colModel: [
               {name: "Name"},
               {name: "Category"},
               {name: "Subcategory"},
               {name: "PRCategory"},
               {name: "PRSubcategory"}
           ],
           cmTemplate: {width: 200},
           gridview: true,
           autoencode: true,
           sortname: "Name",
           viewrecords: true,
           rownumbers: true,
           sortorder: "desc",
           ignoreCase: true,
           pager: "#pager",
           height: "auto",
           caption: "How to use filterToolbar better locally"
       }).jqGrid("navGrid", "#pager",
           {edit: false, add: false, del: false, search: false, refresh: false});
   
       setSearchSelect.call($grid, "Category");
       setSearchSelect.call($grid, "Subcategory");
   
       $grid.jqGrid("setColProp", "Name", {
           searchoptions: {
               sopt: ["cn"],
               dataInit: function (elem) {
                   $(elem).autocomplete({
                       source: getUniqueNames.call($(this), "Name"),
                       delay: 0,
                       minLength: 0,
                       select: function (event, ui) {
                           var $myGrid, grid;
                           $(elem).val(ui.item.value);
                           if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
                               $myGrid = $(elem).closest("div.ui-jqgrid-hdiv").next("div.ui-jqgrid-bdiv").find("table.ui-jqgrid-btable").first();
                               if ($myGrid.length > 0) {
                                   grid = $myGrid[0];
                                   if ($.isFunction(grid.triggerToolbar)) {
                                       grid.triggerToolbar();
                                   }
                               }
                           } else {
                               // to refresh the filter
                               $(elem).trigger("change");
                           }
                       }
                   });
               }
           }
       });
   
       $grid.jqGrid("filterToolbar",
           {stringResult: true, searchOnEnter: true, defaultSearch: "cn"});
       jQuery("#list").jqGrid('setGroupHeaders', {
         useColSpanStyle: true, 
         groupHeaders:[
           {startColumnName: 'Category', numberOfColumns: 2, titleText: '<center>Phase 1</center>'},
           {startColumnName: 'PRCategory', numberOfColumns: 2, titleText: '<center>Phase 2</center>'}
         ]
       });
   
   
     //Choose Column code start
       jQuery("#list").jqGrid('setGroupHeaders', {
         useColSpanStyle: true
       });
   
        $.extend(true, $.ui.multiselect, {
            locale: {
                addAll: 'Make all visible',
                removeAll: 'Hide All',
                itemsCount: 'Avlialble Columns'
            }
        });
        $.extend(true, $.jgrid.col, {
           width: 250,
           height: 330,
            modal: true,
            msel_opts: {dividerLocation: 0.5},
            dialog_opts: {
                minWidth: 140,
                show: 'blind',
                hide: 'explode'
            }
        });
        jQuery("#list").jqGrid('navButtonAdd', '#pager', {
            caption: "",
            buttonicon: "ui-icon-calculator",
            title: "Choose columns",
            onClickButton: function () {
                $(this).jqGrid('columnChooser');
            }
        });
       //Column chooser code stop
   
   });
   //]]>
   

   Image 1

Image 2

Answer 1

I find your question very interesting. So +1 from me. Therefore I invested some my time and modified the code of columnChooser used in free jqGrid. I modified additionally showHideColumnMenu plugin, which I created initially as the answer on the issue. I made small modifications in the code of free jqGrid and added the plugin to the free jqGrid repository. Below I describe how one can use columnChooser, showHideColumnMenu and one more new method createContexMenuFromNavigatorButtons.

The problem which you have is not only in the columnChooser. Even if you would do fill the names of columns like you want, you will still have the problem that the user can change the order of columns so that the columns will be moved in/out of the group and it will break the current implementation of column grouping. The only way which I see in columnChooser: don't call this.jqGrid("remapColumns", perm, true); inside of the done callback. I modified the code of columnChooser in free jqGrid so that it follows the rule.

Now the simplest usage of column header (see the demo) will displays the results like on the picture below:

Additionally I introduced the callback buildItemText, which allows to customize the texts displayed in columnChooser. The callback have an object as the only parameter. The options parameter have the following properties iCol (the index in colModel), cm (the item of colModel), cmName (cm.name), colName (colName[iCol]) and groupTitleText which is the grouping header (from titleText property of groupHeaders option of the setGroupHeaders). As the result you can full customize the displayed texts. The next demo displays

It uses the following options of columnChooser

$(this).jqGrid("columnChooser", {
    buildItemText: function (options) {
        if (options.groupTitleText === null) {
            return $.jgrid.stripHtml(options.colName || options.cmName);
        }
        return $.jgrid.stripHtml(options.groupTitleText) + " -> " +
            $.jgrid.stripHtml(options.colName || options.cmName);
    }
});

As I wrote at the beginning of my answer, there are exist now showHideColumnMenu method as free jqGrid plugin (I think to move it later in the main code of jqGrid). It can be used just by adding the following simple call

$grid.jqGrid("showHideColumnMenu");

It uses jQuery UI Menu and makes the binding of contextmenu to the column headers. The click on the right button of the mouse creates context menu like on the picture below (see the demo).

By checking/unchecking of menu items one enables/disables the columns without changing the column order. The plugin supports customization too. The following code

$grid.jqGrid("showHideColumnMenu", {
    buildItemText: function (options) {
        if (options.groupTitleText === null) {
            return $.jgrid.stripHtml(options.colName || options.cmName);
        }
        return "<em>" + $.jgrid.stripHtml(options.groupTitleText) + "</em>: " +
            $.jgrid.stripHtml(options.colName || options.cmName);
    }
});

produces the following custom menu

I added to free jqGrid the plugin createContexMenuFromNavigatorButtons which can be used like below

$grid.jqGrid(
    "createContexMenuFromNavigatorButtons",
    $grid.jqGrid("getGridParam", "pager")
);

The corresponding demo uses all the described above features and displays additionally the context menu inside of the grid body using createContexMenuFromNavigatorButtons. The menu contains the same items like the navigator bar. It is very practical if the grid have many rows. One don't need to scroll to bottom or top toolbar to get click on the navigator button only. The results are like on the picture below

P.S. Please examine the CSS/JavaScript paths of plugins inserted in the above demos if you have wrong results in your code.