I'm new to Jquery, JQgrid. Please pardon my naive question(s). I've a hard coded jqGrid, with 2 rows. They are being displayed on the page. So far so good.
I'd like to activate the search button in the table. I'm able to get search button, but it doesn't pop-out, as a dialog box.
My header looks like:
including all necessary files for CSS and JQuery.
Code: Select all
<head>
<link rel="stylesheet" href="http://localhost/learn_routing/public/css/default.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://localhost/learn_routing/public/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://localhost/learn_routing/public/js/grid.locale-en.js"> </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.min.css">
<script type="text/javascript" src="http://localhost/learn_routing/public/js/jquery.jqGrid.min.js"> </script>
<script type="text/javascript" src="http://localhost/learn_routing/public/js/grid.common.js"> </script>
<script type="text/javascript" src="http://localhost/learn_routing/public/js/grid.filter.js"> </script>
<script type="text/javascript" src="http://localhost/learn_routing/public/js/grid.formedit.js"> </script>
<script type="text/javascript" src="http://localhost/learn_routing/views/grid/js/grid.js"> </script>
</head>
Code: Select all
$(function(){
//hard coded data
var mydata=[
{ID:"one",Name : "row one"},
{ID: "two",Name:"row two"}
];
$("#grid").jqGrid({
data: mydata,
datatype: 'local',
width: 1000,
colName:['ID','Name'],
colModel:[
{ name:'ID',index:'id',key:true,width:50},
{ name:'Name',index:'name',key:true,width:100}
],
rownumbers: true, //show row number
multiselect: true, //check box
pager: '#pager', //div pager
sortname:'id', //sort on id colum
viewrecord:true,
sortorder:"asc",
sortable:true,
caption:"jqGrid Example" //title of the grid
});
jQuery("#grid").jqGrid('navGrid','#pager', {edit:false,add:false,del:false,refresh:false}, {}, {}, {}, {multipleSearch:true, multipleGroup:true} );
//search button .. doesn't work
});
Thanks.