How to enable grouping with summary footer for each group in jqgrid

Question

I have displayed data from server into jqgrid .Now as per my need i have to enable grouping with summary footer for each group of data, but i have no idea how to implement this in JQGRID.. I am using JSP as server side code for fetching data from database. After fetching data, manually i am converting into JSON type..

Here is my client side code..

        var i=1;
        $('#go').click(function(evt){
            evt.preventDefault();
            fromdate=$('#fromdate').val();
            todate=$('#todate').val();
            if(fromdate && todate)
            {  
                var URL='getGriddahico.jsp';
                if(i==1){gridcall(URL);}
                else{jQuery("#gridUsuarios").jqGrid('GridUnload');gridcall(URL);}
                i++; 
            }

        });

    });

    function gridcall(path)
    {
        jQuery("#gridUsuarios").jqGrid({
            url:path,
            datatype: "json",
            colNames:['ID','Call Date','Call Time','Source','DialedNo','Extension'],
            colModel:[
                {name:'id',index:'id', width:90,align: 'center',editable:true, hidden:true,closed:true},
                {name:'date',index:'date',editable:false, width:150,align: 'center'},
                {name:'time',index:'time',editable:false, width:150,align: 'center'},
                {name:'source',index:'source',editable:false, width:170,align: 'center'},
                {name:'destination',index:'destination',editable:false, width:170,align: 'center'}
            ],
            rowNum:50,
            rowList:[50,100,150],
            scrollrows : true,
            pager: '#pagGrid',
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            autowidth:true,
            toppager: true,
            height:470


        });
        // Set navigator with search enabled.
        jQuery("#gridUsuarios").jqGrid('navGrid','#pagGrid',{cloneToTop:true,add:false,edit:false,del:false,search:false})

And here is my jsp code where i am converting data fetched from database into JSON and sending it to Client side code...

int start = 0;
int total = 0;
int total_pages = 0;

int intpage = new Integer(request.getParameter("page"));
int limit = new Integer(request.getParameter("rows"));

String sidx = request.getParameter("sidx");
String sord = request.getParameter("sord");
String strQuery = "";
String json = "";

boolean rc;

ResultSet rs = null;

if (sidx == "") {
    sidx = "1";
}


/*
 * -----------------------------------Conexión to MySql-------------------------------------------
 */
conexion conexiondb = new conexion();
conexiondb.Conectar();
/*
 * -----------------------------------------------------------------------------------------------------------
 */

total = conexiondb.countRec("id", "processeddata_table", query);

if (total > 0) {
    double d = Math.ceil((double) (total) / (double) (limit));
    total_pages = (int) (d);
} else {
    total_pages = 0;
}

if (intpage > total_pages) {
    intpage = total_pages;
}

start = limit * intpage - limit;

if (start < 0) {
    start = 0;
}
 System.out.println(query);
 strQuery = "SELECT *,date(calldate) as date,time(calldate) as time FROM processeddata_table where date(calldate) between '" + query + "  ORDER BY " + sidx + " " + sord + " LIMIT " + start + " , " + limit;
System.out.println(strQuery);

rs = conexiondb.Consulta(strQuery);

total = conexiondb.countRec("id", "processeddata_table", query);


response.setContentType("text/x-json");
response.setCharacterEncoding("utf-8");
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache, must-revalidate");
response.setHeader("Pragma", "no-cache");

json = "";
json = json + "{\n";
json = json + " \"page\":\"" + intpage + "\",\n";
json = json + "\"total\":" + total_pages + ",\n";
json = json + "\"records\":" + total + ",\n";
json = json + "\"rows\": [";
rc = false;

while (rs.next()) {

    if (rc) {
        json = json + ",";
    }
    json = json + "\n{";
    json = json + "\"id\":\"" + rs.getInt("id") + "\",";
    json = json + "\"cell\":[" + rs.getInt("id") + "";
    json = json + ",\"" + rs.getString("date") + "\"";
    json = json + ",\"" + rs.getString("time") + "\"";
    json = json + ",\"" + rs.getString("source") + "\"";
    json = json + ",\"" + rs.getString("destination") + "\"";
    json = json + ",\"" + rs.getString("extension") + "\"";
    json = json + ",\"" + rs.getString("trunk") + "\"";
    json = json + ",\"" + rs.getString("duration") + "\"";

    json = json + ",\"" + rs.getString("toc") + "\"";

    json = json + ",\"" + rs.getString("callcost") + "\"";
    json = json + ",\"" + rs.getString("Site") + "\"]";
    json = json + "}";

    rc = true;
}
json = json + "]\n";

json = json + "}";

out.print(json);
out.close();

Please help me to solve this issue .. Any help will be highly appreciated. Thanks in advance..

Answer 1

For do grouping you need to have the following grid configuration should added to your code.

grouping:true, 
groupingView : { 
         groupField : ['column_name'], 
         groupSummary : [true], 
         groupColumnShow : [true], 
         groupText : ['<b>{0}</b>'], 
         groupCollapse : false, 
         groupOrder: ['asc'] 
}

This will help you to configure grouping your data. For more details about grouping and summary footer data check the jQgrid Demo and check grouping in that refer summary footers. Let me know if this helps.