Posts Tagged ‘Jquery’

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

 

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

}