Jqgrid : toolbar search options – range select from a drop down-Collection of common programming errors


  • TRR

    I 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 VG

    I 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, '-');    
         }});