How to merge rows with same value

Question

function drawTable(url){

    $('#reportList').jqGrid({
        url: url,
        mtype: 'GET',
        datatype: 'json',
        shrinkToFit:false,
        width:null,
        colNames:['num', 'in_charge', 'section1','section2','product','product_description','status','rate','start_date','end_date','proceed_detail'],
        colModel:[
            {name:'num', index:'num', hidden:true},
            {name:'in_charge', index:'in_charge', hidden:true},
            {name:'section1', index:'section1',  width:70},
            {name:'section2', index:'section2', width:140},
            {name:'product', index:'product', width:80},
            {name:'product_description', index:'product_description', width:300},
            {name:'status', index:'status', width:45},
            {name:'rate', index:'rate', width:50},
            {name:'start_date', width:80, index:'start_date'},
            {name:'completion_date', width:80, index:'completion_date'},
            {name:'proceed_detail', index:'proceed_detail', width:400}
       ],

        pager: '#pager',
        multiselect: true,
        rownumbers: true,
        shrinkToFit:false,
        loadonce: true,
    });
}

I retrieve data from server and display it in jqGrid.

First and Second components in colModel are hidden components. So, 'section1' is the first column components to be displayed in jqGrid.

Multiple rows may have same section1 and section2.

So, What I want to do is to merge rows that have same section1 and section2. Basic tag provides rowspan to merge rows.

However, jqGrid never provides that function by default. I've searched stackoverflow for a long time to find the solution, but was unable to do so.

https://stackoverflow.com/questions/12200621/jqgrid-grouping-row-level-data — diavolic, Aug 24 '17 at 04:17
Probably you should try to use grouping data instead of usage `rowspan` approach? You need to add `grouping:true, groupingView: { groupField : ["section1", "section2"] }` and to add `forceClientSorting: true` if you use [free jqGrid](https://github.com/free-jqgrid/jqGrid) or to sort the data on the server by `"section1"` and `"section2"`. — Oleg, Aug 24 '17 at 07:37

score 1 · Answer 1 · answered Aug 24 '17 at 04:27

Fetch data from server with 'extraProperty' like columnattr, which will contain information to merge rowspan or not. So you have to update your server code according to your requirement(just add column).
1. In colmodel add attribute 'cellattr' for particular column and assign your function which will decide to have rowspan from server data 's extraProperty. This function allow you to customize cell in grid. so here you can merge row.

Ref: Jqgrid - grouping row level data

Cheerssssss.

How to merge rows with same value

1 Answers1