Toolbar Searching Select Filter

May 12, 2012 at 2:26 AM
Edited May 12, 2012 at 2:27 AM

I have a jqGrid which has 3 columns, 2 pure text and 3rd Date displayed as text (sample: "15-Jun-2012").

I bind the grid with server side data by  

$.ajax({ url: link, type: "POST"
        }).done (function (msg){
            var grid = $('#gridSearchSite').jqGrid();
            grid.setGridParam({ datatype: 'json' });
            grid.setGridParam({ datatype: 'local' });

Thereby making the datatype as local so that once the grid is loaded, searching and sorting works client side.
I have set stype = select for the third column and I populate it with only those date values which are actually there in the data in the grid. If there are 3 rows in the grid then the select has 3 values in the same format. For the select options I have kept "value" & "text" same (sample: "15-Jun-2012").

Now the problem is that on selecting any value from the dropdown it just removes all the rows from the grid instead of filtering. As the datatype is local and there is no url set, so there is no server call as well which is expected and fine.

Although, the text filters on the first 2 columns works fine. As well as the clear button.

May 13, 2012 at 10:01 PM

As I understand your problem isn't related to the helper at all right?

I would need to see the final colModel definition for column in question to analyze it.

May 13, 2012 at 10:49 PM
Edited May 13, 2012 at 10:50 PM

Thanks for the reply Tony.

I don't exactly understand when you say "the helper", my problem IS related to jqGrid's toolbar searching feature. One of the columns has a select filter which is not working.

Here is the complete grid defination:

colNames: ['Site ID','Country','Address','Date','Action'],
colModel: [
{ key: true, searchoptions: { sopt: [ 'eq'] }, name: 'SiteID' },
{ searchoptions: { sopt: [ 'cn'] }, name: 'Country' },
{ searchoptions: { sopt: [ 'cn'] }, name: 'Address' },
{ formatter: formatDate, stype: 'select', searchoptions: { dataUrl: '/ThirdParty/GetSiteDateFilter' }, name: 'Date' },
{ formatter: CreateSiteAddLink, search: false, name: 'Action' }
autowidth: true,
url: '',
datatype: 'local',
loadonce: true,
pager: '#gridSearchSitePager',
rowNum: 10,
sortname: 'SiteID',
viewrecords: true,
ignoreCase: true,
height: '100%'
}).jqGrid('navGrid', '#gridSearchSitePager',
{ add: false, edit: false, del: false, refreshtext: 'Clear', search: false })
.jqGrid('filterToolbar', { searchOnEnter: true,stringResult: true });
Probably you can ignore the fourth column, it just has a custom action button.
May 14, 2012 at 7:49 AM

So just to clear confusion, I'm not Tony (you were most probably hoping for Tony Tomov, jqGrid author) and this is not jqGrid project (this is ASP.NET MVC strongly typed helper for jqGrid). The jqGrid project is hosted here: (it has forums here: Despite that I can still try to help you with your issue.

I would need to see the response from '/ThirdParty/GetSiteDateFilter' to have clear picture.

May 17, 2012 at 4:58 AM

Sorry for the confusion and honestly I did not realize that it's mainly for jqGrid Helper. 

I suddenly feel like a lost puppy.


Anyways, so first of all great work with the helper. It's really awesome.

Also I was able to fix the problem myself. The thing which I did not realize was that the filters work on the data that posted to the grid and not to the data which is shown in the grid. The difference being the data formatters that we use in the grid. As I mentioned in my initial post that I'm showing the date in particular format, that was the cause of the problem.

In the select filter as well I was showing the date in the same format and the value of each date was also in the custom format, which should have been in the format with which the actual data was posted. That is why the filter was failing. So now the text of the select is in custom date format and value is in the default format.


Thanks for trying to help, really appreciate it.