custom formatter for grouptext in jqgrid

Question

Is there a way I can use custom formatter to format the grouptext value in jqgrid.

Current Output for var grouping=new Array("Environment", "System", "IIR","Userlimit","Kernel Parameters"); Suppose I have these groups.

var grouping=new Array("3Environment", "0System", "4IIR","2Userlimit","1Kernel Parameters");

If I sort it in ascending order it should display System, Kernel, Userlimit, Environment, IIR i.e., using some kind of custom formatter remove 01234 from 1st character or similar to sort my groups in some already decided order.

jqGrid Code

$('#compareContent').empty();
        $('<div id="compareParentDiv" width="100%">'+
          '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
                '<div id="gridpager3"></div></div>')
        .appendTo('#compareContent');

        $("#compareParentDiv").hide();

        var gridDiff = $("#list2");
        gridDiff.jqGrid({
            datastr: compareData,
            datatype: "jsonstring",
            colNames: ['KeyName', 'SubCategory', starheader, header1,'isEqual'],
            colModel: [
                { name: 'elementName', index: 'elementName', key: true, width: 120 },
                { name: 'subCategory', index: 'subCategory', width: 1 },
                { name: 'firstValue', index: 'firstValue', width: 310, jsonmap:'attribute.0.firstValue' },
                { name: 'secondValue', index: 'secondValue', width: 310,jsonmap:'attribute.0.secondValue' },
                { name: 'isEqual', index: 'isEqual', width: 1,hidden:true}
            ],
            pager: '#gridpager3',
            rowNum:60,
            scrollOffset:1,
            //viewrecords: true,
            jsonReader: {
                repeatitems: false,
                page: function(){return 1;},
                root: "response"
            },
            //rownumbers: true,

            height: '320',
            autowidth:true,
            grouping: true,

            groupingView: {
                groupField: ['subCategory'],
                groupOrder: ['desc'],
                groupDataSorted : false,
                groupColumnShow: [false],
                //groupCollapse: true,
                groupText: ['<b>{0}</b>']

            },

            loadComplete: function() {
                if (this.p.datatype !== 'local') {
                    setTimeout(function () {
                       gridDiff.trigger('reloadGrid');
                   }, 0);
                } else {
                    $("#compareParentDiv").show();
                }

                var i, names=this.p.groupingView.sortnames[0], l = names.length;
                 data = this.p.data, rows = this.rows, item;


                for (i=0;i<l;i++) {
                    if ($.inArray(names[i],grouping) >= 0) {

                        $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);

                        $(rows.namedItem(this.id+"ghead_"+i)).find("span.ui-icon").click(function(){
                            var len = data.length, iRow;
                            for (iRow=0;iRow<len;iRow++) {
                                item = data[iRow];
                                if (item.isEqual) {
                                    $(rows.namedItem(item._id_)).hide();
                                }
                            }
                        });

                    } else {
                        // hide the grouping row
                        $('#'+this.id+"ghead_"+i).hide();
                    }
                    //console.info($('#'+this.id+"ghead_"+i));
                }

                var i, names=this.p.groupingView.sortnames[0], l = names.length,
                data = this.p.data, rows = this.rows, item; 

                l = data.length;
                for (i=0;i<l;i++) {
                    item = data[i];
                    if (!item.isEqual) {
                        $(rows.namedItem(item._id_))
                            .css({
                                "background-color": "#FFE3EA",
                                "background-image": "none"
                            });
                    } else {
                        $(rows.namedItem(item._id_)).hide();
                    }
                }
            }
        });
        gridDiff.jqGrid('navGrid', '#gridpager3', { add: false, edit: false, del: false, search: false, refresh: false });
        gridDiff.jqGrid('navButtonAdd',"#gridpager3",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
            onClickButton:function(){
                gridDiff[0].toggleToolbar();
            } 
        });
        gridDiff.jqGrid('navButtonAdd',"#gridpager3",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
            onClickButton:function(){
                gridDiff[0].clearToolbar();
            } 
        });
        gridDiff.jqGrid('filterToolbar',
                {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});

Update

Or is there a way to use positioning to place each grouped item, if sorting is not an option

Updated after accepting answer by Oleg

Page1

Page3

Answer 1

It seems to me that you have not the problem with the custom formatter of the grouptext

You use groupingView having groupDataSorted: false so the sorting of the group (in your case groupField: ['subCategory'] with groupOrder: ['asc']) do jqGrid for you. So the standard sorting behavior will be used.

jqGrid supports sorttype property of the colModel which define how the column should be sorted. If you need custom sorting order you should define sorttype property as a function which returns integer or string used instead of the cell value from the column. the prototype of the sorttype function could be function(cellValue,rowData) so it is possible to define the order which not only the cell value of the sorted column will be used but the whole contain of the row inclusive _id_ property. In you case the usage of the first cellValue parameter would be enough.

So to solve you problem you can for example define an array with the order of 'subCategory' values which you need:

var orderOfSubCategory = [
    "System", "system", "Kernel", "Kernel Parameters", "Userlimit",
    "Environment", "IIR", "Product"
];

and then define 'subCategory' column as following:

{
    name: 'subCategory',
    index: 'subCategory',
    width: 1,
    sorttype: function (value) {
        return $.inArray(value, orderOfSubCategory);
    }
}

You should don't forget, that jQuery.inArray return 0-based index of the item or -1 if the item will be not found in the array. So the values of 'subCategory' which could be not found in the orderOfSubCategory array will be placed the first. See here the corresponding demo.

Some other small remarks about your code. You use new Array(...) which is bad practice in JavaScript instead of that you should use always [...] construct which do the same is shorter and work quickly. Example: var grouping = ["Environment", "System", "IIR","Userlimit","Kernel Parameters"];

Another place which is difficult for to read for me is:

$('#compareContent').empty();
$('<div id="compareParentDiv" width="100%">'+
  '<table id="list2" cellspacing="0" cellpadding="0"></table>'+
        '<div id="gridpager3"></div></div>')
    .appendTo('#compareContent');
$("#compareParentDiv").hide();

Here you first use cellspacing="0" cellpadding="0" attributes of the table which are unneeded and seconds use empty(), append() combination instead of one html() call. The following code do the same, but it seems me better:

$('#compareContent').html(
    '<div id="compareParentDiv" style="display: none" width="100%">' +
    '<table id="list2"></table><div id="gridpager3"></div></div>');