Jqgrid : toolbar search options – range select from a drop down-Collection of common programming errors
TRRI need help to do range select on jqgrid data using the filter toolbar drop down – I checked the sopt options it only has –
['equal','not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain']
and I am not able to find any clue on how to do range with this on the toolbar. I have a drop down that has values like
"All", "1-4", "5-9"
on my filter toolbar and when I select say'1-4'
I want the grid to populate all rows that fall in that range. I looked at a bunch of examples for filter from stackoverflow and trirand itself but they all seem to be for the search box. I am grateful for any help to achieve this, Thanks.
Siva VGI was able to achieve this filter by range based on sample multi-word sample- http://www.ok-soft-gmbh.com/jqGrid/MultiwordSearchingToolbar.htm. Most of the code is from above mentioned sample with minor changes. Modified baseed on feedback from Oleg to make it as le and ge.
modifySearchingFilter = function (separator) { var i, rules, rule, parts, group, str; var filters = $.parseJSON(this.p.postData.filters); if(separator != '-') return; if (filters && typeof filters.rules !== 'undefined' && filters.rules.length > 0) { rules = filters.rules; for (i = 0; i < rules.length; i++) { rule = rules[i]; if (rule.op === 'range') { // Range should only have 2 parts lowerbound and upperbound parts = rule.data.split(separator); if (parts.length == 2) { if (typeof filters.groups === 'undefined') { filters.groups = []; } group = { groupOp: 'AND', groups: [], rules: [] }; filters.groups.push(group); // Breaking to 2 rules one le and other ge group.rules.push({ data: (parts[0]), op: "ge", field: rule.field }); group.rules.push({ data: (parts[1]), op: "le", field: rule.field }); rules.splice(i, 1); i--; // to skip i++ } } } this.p.postData.filters = JSON.stringify(filters); } }, //using range op so that it is not confused with other ops setRangeSearchSelect = function(columnName) { grid.jqGrid('setColProp', columnName, { stype: 'select', searchoptions: { value:buildRangeSearchSelect(), sopt:['range'], } }); }; grid.jqGrid('filterToolbar', { stringResult:true, searchOnEnter:true, defaultSearch:"cn", beforeSearch: function () { modifySearchingFilter.call(this, '-'); }});