jQuery Grid Plugin - jqGrid

I used the existing jqGrid features and simulated the groupBy funtion. This is what I need and it works for me. If a better feature can be provided by jqGrid native code, that will be wonderful. Here is the function I created

function groupBy1(grid,field)
{
// grid        ==>    Name of the grid field
// field    ==>    id name of the field
// example    ==> groupBy1("#list2","name")
// row        ==> this is one of the id used to display the row number
//                and can not be used for group by. If used, it will ungroup
//                the grid
    var txt=field;
    var mya=new Array();                 // array to hold all the rowid of this grid
    mya=jQuery("#list2").getDataIDs();          // Get All IDs
    for(i=0;i<mya.length;i++)
        {
            data=jQuery(grid).getRowData(mya[i]);            // get the row data
            if(data["row"]=="")jQuery(grid).delRowData(mya[i]);   // if the row does not contain any value,
        }                                                            // delete the row (ungroup)
    if(field=="row")                                                //    just ungroup and return ; else
        {
            jQuery(grid).setGridParam({sortname:txt,sortorder: "asc",}).trigger('reloadGrid');
            return;   
        }                                    
    jQuery(grid).setGridParam({sortname:txt}).trigger('reloadGrid');// sort the grid using the field name
    mya=jQuery("#list2").getDataIDs();                              // Get All IDs (after deletioo - ungroup)
    var data=jQuery(grid).getRowData(mya[1]);                         // Get First row to get the labels
    var oldValue=data[txt];                                            // first value
    var insertHere=mya[0];                                            // rowid where the group text has to be inserted
    var groupCount=0;                                                // number of rows in the group
    var dat=new Array();                                            // array to store the gheader value
    for(i=0;i<mya.length;i++)                                        // loop thru all rows
        {
            data=jQuery(grid).getRowData(mya[i]);                    // get the row contents
            if(oldValue!=data[txt])                                    // if the field value is not same
                {
                    var value=oldValue+" - "+groupCount;            //    Set the test
                    dat[txt]=value;                                    // set the field value
                    jQuery(grid).addRowData(insertHere,dat, 'before', insertHere);    // insert group header
                    jQuery(grid).setCell(insertHere,field,'',{color:'red','text-align':'left','font-weight':'bold'}); // set color
                    insertHere=mya[i];                                // reset where to insert group header
                    groupCount=0;                                    // reset group count
                    oldValue=data[txt];                                // rest old value
                }
            else
                groupCount++;                                        // update group count
        }   
    var value=oldValue+" - "+groupCount;                            // set group text for last entry
    dat[txt]=value;                                                    // set the value
    jQuery(grid).addRowData(insertHere,dat, 'before', insertHere);    // add the group header
    jQuery(grid).setCell(insertHere,field,'',{color:'red','text-align':'left','font-weight':'bold'});// set the color
}

I tested the function using following snippet

<input type="BUTTON" id="bexportid" value="GroupBy" onclick='var m=$("grby").value;groupBy1("#list2",m);' />
<select id='grby'>
    <option value='row'>UnGroup</option>
    <option value='invdate'>inv date</option>
    <option value='name'>name</option>
    <option value='note'>note</option>
    <option value='amount'>amount</option>
    <option value='tax'>tax</option>
    <option value='total'>total</option>
</select>