Change style/font of the rows in a group in jqGrid

Question

I have a jqGrid which has grouping. My jqGrid code is similar to my previous question here or working fiddle by Oleg.

$('#states').jqGrid({
    datatype: 'local',
    data: data.DOCS,
    colNames: ['', 'Documents Received', 'Comments', 'NA', 'DocGroup'],
    colModel: [
        { name: 'Documents', index: 'Documents', align: 'left', sortable: false, editable: false, width: 20 },
        { name: 'DocsReceived', index: 'DocsReceived', align: 'center', sortable: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 140 },
        { name: 'Comments', index: 'Comments', align: 'center', sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "3", cols: "16" }, width: 180 },
        { name: 'NA', index: 'NA', editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue} },
        { name: 'DocGroup', index: 'DocGroup', editable: false, width: 1,
         sorttype: function (cellvalue, rowObject) {
             return cellvalue? cellvalue : rowObject.Documents;
         }}
    ],
    rowNum: data.DOCS.length,
    //rowList: [10, 20, 30],
    pager: '#statespagerdiv',
    viewrecords: true,
    sortorder: "asc",
    sortname: 'Documents',
    grouping: true,
    groupingView: {
        groupField: ['DocGroup'],
        groupColumnShow: [false],
        groupDataSorted: true,
        groupOrder : 'asc'
    },
    localReader: {
        id: 'ConfigId'
    },
    shrinkToFit: false,
    height: 'auto',
    loadComplete: function () {
        hideGroupHeaders(this);
    },
    onSelectRow: function (id) {
        $(this).jqGrid('saveRow', previouslyselectedRow, false, 'clientArray');
        previouslyselectedRow = setJQGridRowEdit(id, previouslyselectedRow, $(this));
    }//,
    //width: 710
});

How can I have rows which are not grouped (or not in a group) and grouping headers have the same style, but rows with in a group should have a style different to that of those not in group or grouping header.

score 2 · Accepted Answer · answered Feb 24 '15 at 20:04

I'm not sure that I correctly understand the requirement. I modified in the demo

function hideGroupHeaders(grid) {
    var i, names = grid.p.groupingView.groups, l = names.length, $grp, j;
    for (i = 0; i < l; i++) {
        $grp = $('#' + grid.id + "ghead_0_" + i);
        if (names[i].value === '') {
            $grp.hide();
        } else {
            // hide the grouping row
            $(grid).jqGrid('groupingToggle', grid.id + "ghead_0_" + i);
            for (j = 0; j < names[i].cnt; j++) {
                $(grid.rows[$grp[0].rowIndex + 1 + j]).addClass("grouppedRows");
            }
        }
    }
}

where I set grouppedRows class to hidden grouped rows. You can see the results here: http://jsfiddle.net/OlegKi/xx7Jg/82/. If one opens the groups one see that the rows will be displayed in another style defined by the class grouppedRows

enter image description here

Change style/font of the rows in a group in jqGrid

1 Answers1

Linked