Home/ Questions/Q 7611979
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:47:56+00:00

Good day. I try to use jqGrid in my web project. everything is good

  • 0

Good day.

I try to use jqGrid in my web project.
everything is good but one moment.
I want to enable filterToolbar but I can’t.
I used lot of documentation and examples without good result.

  1. data in grid is good
  2. sorting is good
  3. PROBLEM: filterPanel is invisible

Version: jqGrid 4.3.1 – jQuery Grid
Browser: Chrome and Internet Explorer

Please have a look on my code.
Thanks a lot.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> 
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="listU05"></table> 
<div id="pager"></div> 


<script type="text/javascript">
 $(document).ready(function(){ 
 $("#listU05").jqGrid({
 url:'u05json.json',
 datatype: 'json',
 mtype: 'POST',
 colNames:[
    'thema'
],
colModel :[ 
    {name:'Thema', index:'Thema', width:55}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'Thema',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'My first grid11',
width:200
}); 
}); 
jQuery("#listU05").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false,      defaultSearch : "cn"});
</script>

 </body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think the problem is that you placed call of filterToolbar outside of the $(document).ready event handler $(document).ready(function(){...});. As the result the filterToolbar will be called before the grid created. Moving the call of filterToolbar at the end of $(document).ready event handler should solve the problem.

    Moreover you should include !DOCTYPE declaration before <html>. For example it can be <!DOCTYPE html> or <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.

    • 0