jQgrid : Change search filter before submit

we can use beforeSearch event for toolbar searching
onSearch for advanced searching and single field search
Code :

$(“#list”).jqGrid(‘filterToolbar’, {
beforeSearch: function () { fnBeforeSearch(); }
…
});

///trim all data before submit to search
function fnBeforeSearch() {
var i, l, rules, rule, $grid = $(“#list”),
postData = $grid.jqGrid(‘getGridParam’, ‘postData’),
filters = $.parseJSON(postData.filters);

if (filters && typeof filters.rules !== ‘undefined’ && filters.rules.length > 0) {
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
rule.data = rule.data.trim();
}
postData.filters = JSON.stringify(filters);
}
}

JqGrid sorting numeric value with blank and null

Code :

sorttype: function (cellValue) {
return isNaN(cellValue) ? -100000 : Number(cellValue);
}

jqGrid Functions

Set Sorting :

$(“#tblJqGrid”).jqGrid(‘setGridParam’, {sortname:’columnname’, sortorder: ‘sordorder’ });
$(‘#tblJqGrid’).trigger(“reloadGrid”, [{ page: 1 }]);

Another Option :
$(“#tblJqGrid”).sortGrid(‘columnname’, reload);
reload is boolean(true/false) param.

Get current sorted column & order :

$(“#tblJqGrid”).jqGrid(‘getGridParam’, ‘sortname’);
$(“#tblJqGrid”).jqGrid(‘getGridParam’, ‘sortorder’);

Set jqGrid Data :

$(“#tblJqGrid”).jqGrid(‘setGridParam’, { data: jsonObjGridData });

Clear jqGrid Data :

$(“#tblJqGrid”).jqGrid(‘clearGridData’);

Show/Hide Columns :

$(“#tblJqGrid”).jqGrid(‘showCol’, [‘Column1’, ‘Column2’];
$(“#tblJqGrid”).jqGrid(‘hideCol’, [‘Column1’, ‘Column2’];

Resize jqGrid :

$(“#tblJqGrid”).jqGrid(‘setGridWidth’, , true).trigger(‘resize’);
$(“#tblJqGrid”).jqGrid(‘setGridHeight’, , true).trigger(‘resize’);

Reload jqGrid :

$(‘#tblJqGrid’).trigger(“reloadGrid”, [{ page: 1 }]);

Clear all values in search Toolbar :

$(“#JqGridId”)[0].clearToolbar();

Get value from cell :

var value = $(“#tblJqGrid”).jqGrid(‘getCell’, rowId, ‘ColumnName’ );

Set value to cell :

$(“#tblJqGrid”).jqGrid(‘setRowData’, rowId, { ColumnName: data });

 

Add new filter in jqGrid tool bar search

Code :

$(“#tblJqGrid”).jqGrid(‘filterToolbar’, {
stringResult: true, searchOnEnter: true, autosearch: true, enableClear: false,
afterSearch: function () {
if (myfilter != null) {
var myRules = “”;
var _SearchFilter = “”;

///creating new filter
myRules += “,{\”field\”:\”” + + “\”,\”op\”:\”” + + “\”,\”data\”:\”” + + “\”}”;
myRules += “]}”;

if ($(“#tblJqGrid”)[0].p.postData._search != false) {///append new filter in tool bar search filter

_SearchFilter = $(“#tblJqGrid”)[0].p.postData.filters.replace(“]}”, myRules);

$(“#tblJqGrid”).jqGrid(“getGridParam”, “postData”).filters = _SearchFilter;
$(“#tblJqGrid”).trigger(“reloadGrid”, [{ page: 1 }]);
}
else {

$(“#tblJqGrid”).jqGrid(‘setGridParam’, {
postData: { filters: },
search: true
});
$(“#tblJqGrid”).trigger(“reloadGrid”, [{ page: 1 }]);
}
}
}
});

 

JqGrid cell click using column name

We can use onCellSelect to set click function and can use getGridParam – colModel to get which column cells to have click function.

Coding :

onCellSelect: function(rowid, index, contents, event) 
{    
   var cm = $("#list1").jqGrid('getGridParam','colModel');                          
   if(cm[index].name == "ColumnName")
   {
       fnName(rowid);
   }
}

Changing JqGrid Cell Font Color

We can use setCell property of JqGrid for changing cell font color

Coding :

$(‘#jqgrid’).jqGrid(‘setCell’,rowId,’column Name’,”,{color:’red’});

Changing Column Header Alignment – JqGrid

We can use setLabel method to change the alignment of JqGrid Column Header

Coding :

$(“#grid”).jqGrid(“setLabel”,”columnname”,””,{“text-align”:”left”});

 

JQgrid cell Edit

We can able to Edit the grid cell value using the following code

Javascript:

$(document).ready(function(){

jQuery(“#list1”).jqGrid({

url:’test.aspx’,

datatype: “json”,

height: ‘auto’,

colNames: [‘col1′,’ col2′,’ col3′,’ col4′,’ col5′,’ col6′,

colModel:[ . . . ],

. . .

grid Complete: function()
{

var ids = jQuery(“#list1”).jqGrid(‘getDataIDs’);

for(var i=0;i < ids.length;i++)
{
var cl = ids[i];
be = “<input style=’height:22px;width:20px;’ type=’button’ value=’E’ title=’Edit’ onclick=\”jQuery(‘#list1’).jqGrid(‘editRow’,'”+cl+”‘);\” />”;
se = “<input style=’height:22px;width:20px;’ type=’button’ value=’S’ title=’Save’ onclick=\”UpdateQty(‘”+cl+”‘);\” />”;
ce = “<input style=’height:22px;width:20px;’ type=’button’ value=’C’ title=’Cancel’ onclick=\”jQuery(‘#list1’).jqGrid(‘restoreRow’,'”+cl+”‘);\” />”;
jQuery(“#list1”).jqGrid(‘setRowData’,ids[i],{act:be+se+ce});
}

},

caption : “Header Colspan”

editurl: “ProductionGetData.aspx?strMode=Production_Change”

});

Fuction:
function UpdateQty(rowId)
{
var ProductionDate = $(‘#txtProductionDate’).val();
var Shift=$(‘#drpShift’).val();
var rd = $(“#list1”).jqGrid(‘getRowData’,rowId);
jQuery(“#list1”).jqGrid(‘setGridParam’, { editurl: “DespatchGetData.aspx?strMode=Production_Change&qstrBarcodeId=”+rd.BarcodeId+”&qstrProductionDate=”+rd.ProductionDate+”&qstrShift=”+rd.Shift});
jQuery(‘#list1’).jqGrid(‘saveRow’,rowId);
reload();
}

Colspan in JQgrid Header

In JQgrid header colspan option is presently not available.
But we can do it using following code

HTML :

<table id=”list1″>

</table>

<div id=”pager1″>

</div>

Javascript :

$(document).ready(function()

{

jQuery(“#list1”).jqGrid({

url:’test.aspx’,

datatype: “json”,

height: ‘auto’,

colNames: [‘col1′,’ col2′,’ col3′,’ col4′,’ col5′,’ col6′,

colModel:[ . . . ],

. . .

caption : “Header Colspan”

});

var SuperHeader = ‘<tr id=”super_header” class=”ui-jqgrid-labels” role=”rowheader”>’;

SuperHeader += ‘<th class=”ui-state-default ui-th-column ui-th-ltr”  style=”width: 145px;”></th>’;

SuperHeader += ‘<th class=”ui-state-default ui-th-column ui-th-ltr”  style=”width: 143px;”></th>’;

SuperHeader += ‘<th class=”ui-state-default ui-th-column ui-th-ltr” colspan=”2″  style=”width: 192px;”>Col 3 & 4</th>’;

SuperHeader += ‘<th class=”ui-state-default ui-th-column ui-th-ltr” colspan=”2″  style=”width: 192px;”> Col 5 & 6</th>’;

 

$(‘#gbox_list1’).find(‘.ui-jqgrid-labels’).before(SuperHeader);

}