JQGrid Filter

JavaScript
1

Hi Guys,

I have loaded all values in the table from array using JQgrid. I added one filter toolbar in the header which i have defined the selectbox and populated the values are few condition operator(Like >10, <10 etc… ) for tax column. My question is how can i fetch the value from the selectbox and apply the filter according the condition. Please help me.

Regards,
Dinesh

2

About the best example of that is in the Live Data Manipulation section from their documentation page at http://trirand.com/blog/jqgrid/jqgrid.html

3

thanks for your reply, In the same functionality i have placed that selectbox filter under taxcolumn in the header layer. i don’t want popup filter toolbar inside table . I hope you understand my requirement.

Eg:

<select>
<option value='10'>&gt10</option>
<option value='20'>&gt20</option>
<option value='10'>&lt10</option>
</select>

My Script Code:

jQuery(document).ready(function () {

	var op = ":All;10:>10;20:>20;10: < 10";
	var arr = ['ge','le'];
	var sym;
	
	var mygrid = jQuery("#colch").jqGrid({
		data: mydata,
		datatype: "local",
		colNames:['Inv No','Date', 'Client Has Long Title', 'Amount','Tax','Total','Notes'],
		colModel:[
			{name:'id',index:'id', width:60, sorttype:"int"},
			{name:'invdate',index:'invdate', width:90, sorttype:"date"},
			{name:'name',index:'name', width:100},
			{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
			{name:'tax',index:'tax', width:80, align:"right",sorttype:"float",search:true, stype:'select', searchoptions:{
				value: op,
				sopt:["\\'"+sym+"\\'"],
				dataEvents :[
					{type: 'change', fn: function(e) {
						var thisval = $(this).find('option:selected').text();
						if(thisval=='<10'){
							sym= arr[1];
						}
						else{
							sym = arr[0];
						}
						//alert(sym);
					}
				}]
				
			},	
			editrules: { required: true}
			},		
			{name:'total',index:'total', width:80,align:"right",sorttype:"float"},		
			{name:'note',index:'note', width:150, sortable:false, hidden:true}		
		],
		rowNum:10,
		width:800,
		height:350,
		rowList:[10,20,30,40],
		pager: '#pcolch',
		sortname: 'invdate',
		shrinkToFit :true,
		viewrecords: true,
		sortorder: "tax",
		caption:"Column Chooser Example"
	});

The value is not assigned in the sopt when i change the value in selectbox. Can you please check what error in that code?