This Function Changes the Alignment of Column Heading as

    /* @author Shiva Bhusal \* 
     * @param tableName Id of table within which jQGrid is to be embedded 
     * @param headingName Name of Column Heading 
     * @param alignmentType Type of alignment Desired viz, left, center, right 
     * @use inside --\> loadComplete: function (data) {//Here} 
     * */

    function jQGridAlignHeading(tableName, headingName, alignmentType){
     $('#jqgh_'+tableName+'_'+headingName).css({
     // Style for Alignment and Padding is for Sort-Icon
     'text-align':alignmentType,
     'padding-right':'12px'
     });
     }

Adding custom event in jQGrid pager input box

We can add Custom event such as blur, click, etc in input box of pager in JqGrid.

• Just Create a new Jquery Event Object, assign its keyCode property with 13 –> (code for “Enter Key” in this case )
• Now trigger the predefined event you want with your custom event ( in this case I wanted to trigger the “Enter Key Press” event with blur event

var keyPressEvent     = jQuery.Event('keypress');
keyPressEvent.which   = 13;
keyPressEvent.keyCode = 13;

$('input.ui-pg-input').blur(function(){
  $(this).trigger(keyPressEvent)
});

Make jQGrid responsive

There might be other better ways to make jQGrid responsive. This is an explicit way to do that.

    /*
    \* 
    \* Binding function resizeGrid to resize and load event of window 
    \* 
    \* @author Shiva Bhusal
    */ 
    jQuery(window).bind('resize', function () { 
        resizeGrid('#bids-table', '#bids');
    });
    jQuery(window).bind('load', function () { 
        resizeGrid('#bids-table', '#bids'); 
    }); 

    /* This function resizes the width of jQGrid, makes jqgrid responsive \* 
    \* @param responsiveParentId Id of parent that is responsive, by default it will take body 
    \* @param idOfTable Id of the table that needs to be responsive 
    \* \* @author Shiva Bhusal 
    */
    function resizeGrid(idOfTable, responsiveParentId) { 
        // pageWidth imports its width from responsiveParentId, Default parent is BODY 
        responsiveParentId  = responsiveParentId || 'body';
        var pageWidth       = $(responsiveParentId).width();
        $(idOfTable).setGridWidth(pageWidth);
    }

JqGrid Reset row selction when clicked outside or lost focus or onBlur

When a row is selected/clicked in jqGrid, the row remains highlighted until you click on next row, but not when grid is out of focus or other items in the document are selected. To remove the highlighted effect from the selected row, you need to add new event handler (focus out).

$(gridId).jqGrid().focusout(function () {
    $(gridId).jqGrid("resetSelection");
});

Get ID of Grid’s Pager ID. Top or Bottom

    var jqGrids = $('table.ui-jqgrid-btable');
    if (jqGrid.length > 0) {
        jqGrid.each(function(i) {
            if (this.grid) {
                // one more test for the jqGrid
                // jqGrid[i] is a jqGrid
                topPager = this.p.toppager
                    // this.id + '_toppager' is the id of the top pager

                bottomPager = this.p.pager
                    // this.p.pager is the id of the bottom pager

            }
        });
    }

Get Count of Records

You just need to put this code in loadComplete: function (data) {} section

var count=jQuery("#id_of_jqgrid").jqGrid('getGridParam', 'records');