I'm trying out very simple search popup on the JqGrid. Please see the code below. There are few issues:
The popup comes up with AND/OR and [+] controls at the very top. See screenshot below: (from FF 4)
You can click on [-] button to remove the very first (and only) filter row. It shouldn't be allowed. First filter row should never be allowed to be removed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>JQGRID Test</title> <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css"/> <link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css"/> <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.js"></script> <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script> <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script> <script type="text/javascript"> $(function() { createGrid(); }); function createGrid() { $("#jqgrid-table").jqGrid({ colNames:['First Name', 'Last Name', 'Age', 'IQ', 'Type'], colModel:[ {name:'firstName',index:'firstName', width:100}, {name:'lastName',index:'lastName', width:100}, {name:'age', index:'age', width:50}, {name:'iq', index:'iq', width:50, stype:'select', searchoptions: {dataUrl:'/api/domains/putcalldomain'}}, {name:'type', index:'type', width: 56} ], width: 800, datatype:'local', pager: '#pager2', viewrecords: true, caption:"JSON Example" }); var searchOptions = { caption: 'Filter...', multipleSearch:true, closeAfterSearch:true, closeAfterReset:true, Find: 'Filter' }; jQuery("#jqgrid-table").jqGrid('navGrid', '#pager2', {search:true, edit:false, add:false, del:false, refresh:false}, null, null, null, searchOptions ); var data = getData(); for(var i =0; i < data.length; i++) { var r = data[i]; jQuery("#jqgrid-table").addRowData(r.id, r); } } function getData() { return [ {id:1, firstName: 'John', lastName: 'XXX', age:'30', iq:'200', type: 'Nice'}, {id:2, firstName: 'Ashley', lastName:'YYY', age:'31', iq:'210', type:'Nicer'}, {id:3, firstName:'Smith', lastName:'ZZZ', age:'23', iq:'90', type:'Nicest'} ]; } </script> </head> <body> <div id='jqgrid-div'> <table id='jqgrid-table'></table> <div id="pager2"></div> </div> </body> </html>