{"id":3369,"date":"2014-03-23T11:24:17","date_gmt":"2014-03-23T11:24:17","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/03\/23\/jqgrid-toolbar-search-options-range-select-from-a-drop-down-collection-of-common-programming-errors\/"},"modified":"2014-03-23T11:24:17","modified_gmt":"2014-03-23T11:24:17","slug":"jqgrid-toolbar-search-options-range-select-from-a-drop-down-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/03\/23\/jqgrid-toolbar-search-options-range-select-from-a-drop-down-collection-of-common-programming-errors\/","title":{"rendered":"Jqgrid : toolbar search options &#8211; range select from a drop down-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/bbaaf2300f0b6687d270a1e07fae7d59?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nTRR<\/p>\n<p>I need help to do range select on jqgrid data using the filter toolbar drop down &#8211; I checked the sopt options it only has &#8211;<\/p>\n<pre><code>['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']\n<\/code><\/pre>\n<p>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 <code>\"All\", \"1-4\", \"5-9\"<\/code> on my filter toolbar and when I select say <code>'1-4'<\/code> 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.<\/p>\n<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/5dd968d72a550680a1e04d887fda6839?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nSiva VG<\/p>\n<p>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.<\/p>\n<pre><code>    modifySearchingFilter = function (separator) {\n            var i, rules, rule, parts, group, str;\n            var filters = $.parseJSON(this.p.postData.filters); \n            if(separator != '-')\n              return;\n            if (filters &amp;&amp; typeof filters.rules !== 'undefined' &amp;&amp; filters.rules.length &gt; 0) {\n                rules = filters.rules;\n                for (i = 0; i &lt; rules.length; i++) {\n                    rule = rules[i];\n                    if (rule.op === 'range') {\n                        \/\/ Range should only have 2 parts lowerbound and upperbound\n                        parts = rule.data.split(separator);\n                        if (parts.length == 2) {\n                            if (typeof filters.groups === 'undefined') {\n                                    filters.groups = [];\n                            }\n                            group = {\n                                groupOp: 'AND',\n                                groups: [],\n                                rules: []\n                            };\n                            filters.groups.push(group);\n                            \/\/ Breaking to 2 rules one le and other ge\n                            group.rules.push({\n                                        data: (parts[0]),\n                                        op: \"ge\",\n                                        field: rule.field\n                                    });                             \n                            group.rules.push({\n                                        data: (parts[1]),\n                                        op: \"le\",\n                                        field: rule.field\n                                    });                                                                     \n                            rules.splice(i, 1);     \n                            i--; \/\/ to skip i++                             \n                        }\n                    }\n                }\n                this.p.postData.filters = JSON.stringify(filters);\n            }\n        },\n\n\n \/\/using range op so that it is not confused with other ops\n setRangeSearchSelect = function(columnName) {\n        grid.jqGrid('setColProp', columnName,\n        {\n           stype: 'select',\n           searchoptions: {                                 value:buildRangeSearchSelect(),\n                 sopt:['range'],                            \n        }\n     });\n    };\n\n grid.jqGrid('filterToolbar',  \n    {\n     stringResult:true, \n     searchOnEnter:true,      \n     defaultSearch:\"cn\", \n     beforeSearch: function () {  \n       modifySearchingFilter.call(this, '-');    \n     }});\n<\/code><\/pre>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>TRR I need help to do range select on jqgrid data using the filter toolbar drop down &#8211; I checked the sopt options it only has &#8211; [&#8216;equal&#8217;,&#8217;not equal&#8217;, &#8216;less&#8217;, &#8216;less or equal&#8217;,&#8217;greater&#8217;,&#8217;greater or equal&#8217;, &#8216;begins with&#8217;,&#8217;does not begin with&#8217;,&#8217;is in&#8217;,&#8217;is not in&#8217;,&#8217;ends with&#8217;,&#8217;does not end with&#8217;,&#8217;contains&#8217;,&#8217;does not contain&#8217;] and I am not able to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3369","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=3369"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/3369\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=3369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=3369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=3369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}