jqGrid 3.5 Auto-filter option

Updated 1st Aug, 2010: A JqGrid PHP Component is also available (free of cost), Generate fully functional Grid in record time.

For excel like Autofilter option using javascript … i found 2 solutions …

1. Tabular data in table form is common on web sites and web applications, and a common requirement is to manipulate the data tables on the client side, rather than going back to the server to sort, filter, page, etc. This library offers the key functionality that is typical – the most common of which is client-side table sorting.

Some of the key features of this library are:

  • Sorting is fast. Much faster than most other libraries, due to a number of optimizations
  • Rowspan and Colspan in headers will not confuse the code
  • Alternate row coloring (a common item) is handled by re-shading after sorting or filtering
  • Tbody contents are handled separately, so there can be separate sortable sections of a table
  • Easy CSS classes are applied to cells after filtering, sorting, etc which you can hook into from your CSS rules to show the sorted column or the cells which are filtered.

http://www.javascripttoolbox.com/lib/table/

2. jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

New thing for me was auto filter feature.

jqgrid demos 1249352783153

http://trirand.com/jqgrid/jqgrid.html

Here is the sample code …

== HTML ==

<table id="s2list"></table>
<div id="s2pager"></div>
<div id="filter" style="margin-left:30%;display:none">Search Invoices</div>
<script src="search2.js" type="text/javascript"> </script> 




== JS CODE ==

   	var mygrid = jQuery("#s3list").jqGrid({
   	url:'search.php?q=1',
	datatype: "json",
	width: 700,
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:65},
   		{name:'invdate',index:'invdate', width:90,searchoptions:{dataInit:function(el){$(el).datepicker({dateFormat:'yy-mm-dd'});} }},
   		{name:'name',index:'name', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right", stype:'select', editoptions:{value:":All;0.00:0.00;12:12.00;20:20.00;40:40.00;60:60.00;120:120.00"}},
   		{name:'total',index:'total', width:80,align:"right"},
   		{name:'note',index:'note', width:150, sortable:false}
   	],
   	rowNum:10,
   	mtype: "POST",
   	rowList:[10,20,30],
   	pager: '#s3pager',
   	sortname: 'id',
    viewrecords: true,
	rownumbers: true,
    sortorder: "desc",
	gridview : true,
    caption:"Toolbar Search Example"
});
jQuery("#s3list").jqGrid('navGrid','#s3pager',{edit:false,add:false,del:false,search:false,refresh:false});
jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Toggle",title:"Toggle Search Toolbar", buttonicon :'ui-icon-pin-s',
	onClickButton:function(){
		mygrid[0].toggleToolbar()
	}
});
jQuery("#s3list").jqGrid('navButtonAdd',"#s3pager",{caption:"Clear",title:"Clear Search",buttonicon :'ui-icon-refresh',
	onClickButton:function(){
		mygrid[0].clearToolbar()
	}
});
jQuery("#s3list").jqGrid('filterToolbar');

7 Responses to “jqGrid 3.5 Auto-filter option”

  1. Fix Search2.js Errors - Windows XP, Vista, 7 & 8 Says:

    […] jqGrid 3.5 Auto-filter option | Azghanvi’s Technical Research … – Updated 1st Aug, 2010: A JqGrid PHP Component is also available (free of cost), Generate fully functional Grid … display:none”>Search Invoices […]

  2. jrom Says:

    Hi,

    Do you have an update on this feature? It seems not to work on versions greater than 3.5.

    Thanks.

  3. Ritz Says:

    please tell which all js files I need to include in my master page.

    Please,because my filter textboxes are not seen

    Thanks ur post helped me a lot.

  4. Mitul Patel Says:

    Hi,

    Can you give me ref. to implement filter feature. I am not able find it out on http://trirand.com/jqgrid/jqgrid.html.

    Looking forward for your response.

    Thanks,
    Mitul P.

  5. Jishnu Says:

    Hey,
    Thanks for the info, you did not mention what is need to be done for auto-filter to get activated?


Share your thoughts & feedback

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: