asp.net - JQGrid filterToolbar is not working -
this first time i'm working jqgrid. i've loaded data grid filtertoolbar not working. here view
<asp:content id="content1" contentplaceholderid="titlecontent" runat="server"> index </asp:content> <asp:content id="content2" contentplaceholderid="maincontent" runat="server"> <title>jqgrid asp.net mvc - demo</title> <!-- jquery ui theme used grid --> <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" /> <!-- css ui theme extension of jqgrid --> <link rel="stylesheet" type="text/css" href="../../content/themes/ui.jqgrid.css" /> <!-- jquery library prerequisite jqgrid --> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> <!-- language pack - must included before jqgrid javascript --> <script type="text/javascript" src="../../scripts/trirand/i18n/grid.locale-en.js"></script> <!-- jqgrid javascript runtime --> <script type="text/javascript" src="../../scripts/trirand/jquery.jqgrid.min.js"></script> <script type="text/javascript"> var mygrid = $('#list'); $(function () { $("#list").jqgrid({ url: '/jqgridclients/dynamicgriddata/', datatype: 'json', mtype: 'get', colnames: ['clientid', 'address', 'company', 'name'], colmodel: [ { name: 'clientid', index: 'clientid', search: false, width: 60, align: 'left' }, { name: 'address', index: 'address', search: true, sortable: true, align: 'left' }, { name: 'company', index: 'company', search: true, align: 'left', stype: 'select' }, { name: 'name', index: 'name', search: true, align: 'left', searchoptions: { sopt: ['eq', 'ne', 'cn']}}], pager: jquery('#pager'), rownum: 10, rowlist: [5, 10, 20, 50], sortname: 'clientid', sortorder: "desc", viewrecords: true, imgpath: '/scripts/themes/coffee/images', caption: 'clients', }).navgrid('#pager', { search: true, edit: false, add: false, del: false, searchtext: "search" }); $("#list").jqgrid('filtertoolbar', { stringresult: true, searchonenter: false, defaultsearch: 'cn' }); }); </script> <h2>index</h2> <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table> <div id="pager" class="scroll" style="text-align:center;"></div> </asp:content>
you use correctly filtertoolbar
. wrote "my filtertoolbar not working" without details. suppose not implemented filtering on server side.
if user enter filter in filter toolbar new request send server (to '/jqgridclients/dynamicgriddata/'
). option filter
has format described in the documentation. @ the answer or another one code examples.
if number of rows in grid need display not large (less 1000 rows example) can simplify code usage client side paging , filtering. need make following changes:
- add
loadonce: true
option grid - change server code returns all pages of data (without paging on server side) on request of jqgrid. need still sort data.
you should additionally review option of jqgrid use. example
- you use
imgpath
option deprecated since jqggrid 3.5 (the current version 4.4.5). - you need use
gridview: true
instead improves performance - you should replace
pager: jquery('#pager')
pager: '#pager'
because jqgrid need string parameter of jqgrid. - you should reduce html fragment
<table>
,<div>
needed jqgrid<table id="list" ></table><div id="pager"></div>
. other attributes (inclusiveclass
) deprecated , not used in versions of jqgrid published last 3 years.
Comments
Post a Comment