Home › Forums › Guriddo jqGrid JS › Help › jqGrid filtertoolbar client side search not working
Tagged: client side, filtertoolbar, jqgrid, search
Hi,
I could able to see the data and do the sorting at the client side. I couldn’t able to do search. I see the toolbar coming up, but when i entered text and press ‘enter’, nothing happens. I searched all over the internet and followed the documentation example. Nothing worked. I request help from this forum.
$(“#jqGrid”).jqGrid({
url: “GeneralLedgerAccountReviewCB.aspx/GetAccounts”,
datatype: “json”,
ajaxGridOptions: { contentType: ‘application/json; charset=utf-8’ },
postData: ‘{Division: “‘ + _division
+ ‘”, GLNum: “‘ + _glNum
+ ‘”}’,
mtype: “POST”,
jsonReader: {
root: function (obj) {
return typeof obj.d === “string” ? $.parseJSON(obj.d) : obj.d;
},
repeatitems: false
},
loadonce:true,
page: 1,
colModel: [
{
label: “GL Acct. No”,
//sorttype: ‘integer’,
name: ‘GLAcct’,
index:’GLAcct’,
width: 120,
search: true
},
{
label: “Borough”,
//sorttype: ‘integer’,
name: ‘Borough’,
index: ‘Borough’,
width: 120,
search: true
},
{
label: “GL Description”,
//sorttype: ‘integer’,
name: ‘GLDescription’,
index: ‘GLDescription’,
key:true,
width: 120,
search: true
},
{
label: “Begin Balance”,
//sorttype: ‘integer’,
name: ‘BeginBalance’,
index: ‘BeginBalance’,
width: 120,
search: true
},
{
label: “Todays Debits”,
//sorttype: ‘integer’,
name: ‘TodaysDebits’,
index: ‘TodaysDebits’,
width: 120,
search: true
},
{
label: “Todays Credits”,
//sorttype: ‘integer’,
name: ‘TodaysCredits’,
index: ‘TodaysCredits’,
width: 120,
search: true
},
{
label: “Current Balance”,
//sorttype: ‘integer’,
name: ‘CurrentBalance’,
index: ‘CurrentBalance’,
width: 120,
search: true
},
{
label: “Date Tran”,
//sorttype: ‘integer’,
name: ‘DateLastTran’,
index: ‘DateLastTran’,
width: 120,
search: true
}
],
viewrecords: true,
gridview: true,
width: ‘auto’,
height: ‘auto’,
rowNum: 10,
pager: “#jqGridPager”
});
$(‘#jqGrid’).jqGrid(‘filterToolbar’, { searchOnEnter: false, enableClear: false });
//// activate the toolbar searching
$(‘#jqGrid’).jqGrid(‘navGrid’, “#jqGridPager”, {
search: false, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
});
Hello,
You say:…” I see the toolbar coming up, but when i entered text and press ‘enter’, nothing happens.”…
and then you do
1 2 3 |
... $(‘#jqGrid’).jqGrid(‘filterToolbar’, { searchOnEnter: false, enableClear: false }); ... |
You want to search on enter, but in the same time you disable that searching.
When this option is of the grid try tosearch automatically whe you press some char on the searched field.
By the way which version is used.
Can you please post a simple server response (data) so that we test this and see the problem?
Thank you.
Kind Regards
Will
Guriddo Support Team
Hello,
We see that you do not set search operators.
The default search operator is begin with. This does not work on numbers.
By example you can set for number equal operator. This can be something like this:
1 2 3 4 5 6 7 8 9 10 11 12 |
colModel: [ { label: "GL Acct. No", //sorttype: 'integer', name: 'GLAcct', index:'GLAcct', width: 120, search: true, searchoptions: { sopt:['eq']...}, }, ... |
This will tell qjGrid to use the equal operator when search on this field.
Kind Regards,
Will
Guriddo Support Team
Hi,
I tried searchoptions and it is still not working. searchOnEnter is false, because i dont want to get the data as soon as text is entered. What i meant input the search text and on key press down (Enter Button), the search should happen. But it is not the case. Below is my sample json data
{“d”:”[{\”GLAcct\”:\”905.03\”,\”Borough\”:\”2\”,\”GLDescription\”:\”WO-UTL- BRONX\”,\”BeginBalance\”:\”-$22,818.96\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”-$22,818.96\”,\”DateLastTran\”:\”01/21/2016\”,\”RowCount\”:\”422\”},{\”GLAcct\”:\”905.03\”,\”Borough\”:\”3\”,\”GLDescription\”:\”WO-UTL- BROOKLYN\”,\”BeginBalance\”:\”-$9,805.04\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”-$9,805.04\”,\”DateLastTran\”:\”02/05/2016\”,\”RowCount\”:\”423\”},{\”GLAcct\”:\”905.03\”,\”Borough\”:\”4\”,\”GLDescription\”:\”WO-UTL- QUEENS\”,\”BeginBalance\”:\”-$121,727.47\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”-$121,727.47\”,\”DateLastTran\”:\”02/05/2016\”,\”RowCount\”:\”424\”},{\”GLAcct\”:\”905.03\”,\”Borough\”:\”5\”,\”GLDescription\”:\”WO-UTL- STATEN ISLAND\”,\”BeginBalance\”:\”-$12,295.23\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”-$12,295.23\”,\”DateLastTran\”:\”01/21/2016\”,\”RowCount\”:\”425\”},{\”GLAcct\”:\”905.14\”,\”Borough\”:\”1\”,\”GLDescription\”:\”WO-PLP- MANHATTAN\”,\”BeginBalance\”:\”$25,623.55\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$25,623.55\”,\”DateLastTran\”:\”08/31/2009\”,\”RowCount\”:\”426\”},{\”GLAcct\”:\”905.14\”,\”Borough\”:\”2\”,\”GLDescription\”:\”WO-PLP- BRONX\”,\”BeginBalance\”:\”$18,409.23\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$18,409.23\”,\”DateLastTran\”:\”08/23/2011\”,\”RowCount\”:\”427\”},{\”GLAcct\”:\”905.14\”,\”Borough\”:\”3\”,\”GLDescription\”:\”WO-PLP- BROOKLYN\”,\”BeginBalance\”:\”$11,914.06\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$11,914.06\”,\”DateLastTran\”:\”06/29/2010\”,\”RowCount\”:\”428\”},{\”GLAcct\”:\”905.14\”,\”Borough\”:\”4\”,\”GLDescription\”:\”WO-PLP- QUEENS\”,\”BeginBalance\”:\”$23,825.78\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$23,825.78\”,\”DateLastTran\”:\”07/20/2010\”,\”RowCount\”:\”429\”},{\”GLAcct\”:\”905.14\”,\”Borough\”:\”5\”,\”GLDescription\”:\”WO-PLP- STATEN ISLAND\”,\”BeginBalance\”:\”$6,622.14\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$6,622.14\”,\”DateLastTran\”:\”06/22/2010\”,\”RowCount\”:\”430\”},{\”GLAcct\”:\”905.15\”,\”Borough\”:\”2\”,\”GLDescription\”:\”WO-PUT- BRONX\”,\”BeginBalance\”:\”$40,164.46\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$40,164.46\”,\”DateLastTran\”:\”11/03/2010\”,\”RowCount\”:\”431\”},{\”GLAcct\”:\”905.15\”,\”Borough\”:\”3\”,\”GLDescription\”:\”WO-PUT- BROOKLYN\”,\”BeginBalance\”:\”$15,481.26\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$15,481.26\”,\”DateLastTran\”:\”08/07/2014\”,\”RowCount\”:\”432\”},{\”GLAcct\”:\”905.15\”,\”Borough\”:\”4\”,\”GLDescription\”:\”WO-PUT- QUEENS\”,\”BeginBalance\”:\”$8,707.80\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$8,707.80\”,\”DateLastTran\”:\”11/14/2012\”,\”RowCount\”:\”433\”},{\”GLAcct\”:\”905.15\”,\”Borough\”:\”5\”,\”GLDescription\”:\”WO-PUT- STATEN ISLAND\”,\”BeginBalance\”:\”$5,418.21\”,\”TodaysDebits\”:\”$0.00\”,\”TodaysCredits\”:\”$0.00\”,\”CurrentBalance\”:\”$5,418.21\”,\”DateLastTran\”:\”06/22/2010\”,\”RowCount\”:\”434\”}]”}
Hello,
Thanks for the test case and data.
The problem, that you have is incorrect setting of post data – you set it as string, but it is object.
To work this replace:
1 2 3 |
... postData: '{Division: "' + _division+ '", GLNum: "' + _glNum+ '"}', .. |
with
1 2 3 |
... postData: {Division: _division, GLNum: _glNum }, ... |
Kind Regards,
Will
Guriddo Support Team
Hi,
I could able to get the data and see the table when using postData the way I do. I am constructing the post data object with my variables. That works fine. I tried to do object way and I get error as variables are not recognized by jqGrid as those variables are out of the scope.
One more thing I observed is keeping my code as it is and making mtype to “GET” and commenting postData and using my json data, I could able to do client side search.
So I think the problem is with POST only. Do you have any example that the client side search works for POST calls?
Hello,
I tried to do object way and I get error as variables are not recognized by jqGrid as those variables are out of the scope.
Not sure if this is true. It all depend how you try to do this:
By example this will work as setting in grid
1 2 3 |
... postData: { myvar: '{Division: "' + _division+ '", GLNum: "' + _glNum+ '"}' }, ... |
Note how we do this. You can then get server side myvar and do what youwant.
Actually postData is the data parameter in in jQuery ajax function.
If it is not possible for you to change this you can simple set postData as empty object after the grid. Something like this
1 2 3 |
$("#jqGrid").jqGrid({...}); $("#jqGrid").jqGrid('setGridParam', {postData : {}}); |
This is possible since you use loadonce true and your data is going local.
Kind Regards,
Will
Guriddo Support Team
Hi Will,
Thanks for the reply. I have no issue with post data. if object is passed, jquery appends the values to to the query string and if the string is passed , it will go as object. I dont have any issue passing as string. As i get the data and binding is happening.
My main issue is that client side search (loadonce is true) is not working for POST( mytpe:”POST”) calls. Where as it works for GET calls (mtype:”GET”) calls.
I did test this with my code. For GET, I just returned same json response as i get from POST call. I think your library stops or wont do client side search for all POST calls. can you please confirm this? If not, do you have any example of client side search with POST call?
And thanks for the quick response. I really appreciate it.
Thanks
Kishore
Hello,
As I say before, mtype GET or POST does nothing to do with local searching.
To demostrate this I have copy paste your code. The only that is changed is the url and the postData set as object.
Please look at your code and what you do again.
Here is your test code (one to one)
Kind Regards,
Will
Guriddo Support Team
Hello again,
Just to know we do not have a option enableClear as set in your code – it makes me think, that you either have modify the jqGrid code for your needs or you have another settings that you do not have posted here
Kind Regards,
Will
Guriddo Support Team
My requirement is to send the postdata as json object. Otherwise, my services wont recognize them.
On your example, even though postData is json object, the actual request payload sent to service is serialized to URL encoded format.
This is how the payload looks like in chorme developer tool – <span class=”header-value source-code”>myvar=%7BDivision%3A+%221%22%2C+GLNum%3A+%222%22%7D&_search=false&nd=1455208829824&rows=10&page=1&sidx=&sord=asc. </span>
If it is object, i would get invalid json primitive error.
http://stackoverflow.com/questions/2445874/invalid-json-primitive-in-ajax-processing
Hello,
It seems to me you do not have read carefully what Will recommend you.
Your code will work if you do this after calling the grid:
1 2 3 4 |
... $("#jqGrid").jqGrid('setGridParam', {postData : {}}); ... |
Note that using grid complette event is not recommended since this is lunched after every search, sort and etc.
Here is the modified code which use the postData as string and the local search is working as well.
This way – “You have the cake and it it too”
Enjoy
Best Regards
Search is working now after clearing post data object. Thanks. Couldn’t have figured it out as ajax post data supports string in order to send the data in Json format. Our services (microsoft asmx or page methods) have restriction of accepting only JSON format.
Hello,
We are glad to here that the problem is resolved.
Kind Regards,
Will
Guriddo Support Team
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top