Some very helpful jqgrid tips and tricks
Play this article
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');