CODEWITHSUNDEEP
jqgrid
Ron Garrity
Ron Garrity

Reputation: 1463

How to dynamically pass in data to search with jqGrid?

I am using jqGrid to render some data. Now I want the ability to modify the data based on the values of two different select boxes. For example, I have a dropdown of location id's and a dropdown of date ranges. I want to filter by the location id and date range, handling this logic in my /something/search action. How can I pass this additional data into jqGrid dynamically? So, (1) on the initial load and (2) when on onChange event is fired, i'll pass in something like {data: {location_id: 10, range_start: '1/1/2012', range_end: '1/5/2010'}}. I could then read this in as a param, just like I do for "page", "rows", "sidx", etc..

Edit: Included my existing code if needed:

grid.jqGrid({
  url: "/something/search",
  datatype: "json",
  colNames: ['', 'ID', 'Description', 'Start', 'End', 'Last Updated'],
  colModel: [{name:'act',index:'act', width:16,sortable:false},
             { name: 'id', index: 'id', width: 100, hidden: true },
             { name: 'description', index: 'description', width: 200 },
             { name: 'start_date', index: 'start_date', width: 120 },
             { name: 'end_date', index: 'end_date', width: 120 },
             { name: 'last_update', index: 'last_update', width: 120 }],
  rowNum: 20,
  rowList: [10, 20, 50],
  pager: '#data-list-pager',
  sortname: 'ident',
  viewrecords: true,
  sortorder: "desc",
  multiselect: false,
  height: "100%",
  caption: "",
  altRows: true,
  width: 865});

Upvotes: 1

Views: 1520

Answers (1)

Oleg
Oleg

Reputation: 221997

The first way to solve the problem is to follow the way which I described here. In the case the controls which the user will use to filter the grid will be outside of the grid.

Another way which I can suggest is to use the Toolbar Searching. The advantage of the approach is that the controls used for searching will be integrated in the grid. In the case you can use either the select control or text input with the jQuery UI Datepicker.

To add the Toolbar Searching you need just call filterToolbar with the parameters which you prefer. If you would you stringResult: true option the format of the filters parameter which will be send to the server will be the same like in case of the usage of advanced searching. To define 'greater or equal' searching operation for the 'start_date' and the 'less or equal' searching operation for the 'end_date' you need just add searchoptions having 'ge' or 'le' as the first element of the sopt property.

As the result one will be able to filter the grid:

enter image description here

and

enter image description here

see the demo.

Upvotes: 2

Related Questions