Posts Tagged ‘JQgrid’

h1

jQgrid : Change search filter before submit

March 16, 2015

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

Advertisements
h1

JqGrid sorting numeric value with blank and null

March 13, 2015

Code :

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

jqGrid Functions

October 3, 2014

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

 

h1

Add new filter in jqGrid tool bar search

October 3, 2014

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

 

h1

JqGrid cell click using column name

April 19, 2013

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

h1

Changing Column Header Alignment – JqGrid

January 19, 2013

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

Coding :

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

 

h1

Colspan in JQgrid Header

November 26, 2011

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

}