jQGRID:: 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
            
        }
    });
}
Advertisements

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");
});

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)
});

Custom Function to Align jQGrid Column Headers

/**
  * This Function Changes the Alignment of Column Heading as Desired
  *
  * @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'
 });
 }