jQuery Grid Plugin - jqGridForum

Topic RSS

customized search option descriptions

04/04/2013
00:32

younger

New Member

Members

Forum Posts: 2

Member Since:
03/04/2013

Offline

First, I want to say thanks for making such a great grid component open source, jqgrid is an awesome tool.

So I've searched google and this forum and haven't found an exact solution for this using jqGrid, but I've found similar questions.

(The closest I found was: http://stackoverflow.com/quest.....lumn-basis )

Basically I have a column model with customized searchoptions for a start date field.

colModel:[

{name:'User',index:'user.name', width:100},
{name:'StartDate',index:'user.start_date', width:55, formatter: doDateFormat,
          searchoptions:{
                                  sopt: ['eq', 'gt', 'lt'],
                                  dataInit:function(el){
                                      $(el).datepicker({dateFormat:'dd M yy'}).change(function(){$("#userlist")[0].triggerToolbar();});
                                  }
                           }
}

]

When I use the custom search dialog, I want the filter for StartDate to have custom labels for the operators "equal", "greater", and "less". Since the field is a date, I'd like to use "On", "After", and "Before". I realize that these labels come from the jqGrid-local-en.js file, but changing it there would affect all of the fields including the "User" field and I don't want to modify these values globally.

Ideally I'd like to specify:

colModel:[

{name:'User',index:'user.name', width:100},
{name:'StartDate',index:'user.start_date', width:55, formatter: doDateFormat,
searchoptions:{
sopt: ['eq', 'gt', 'lt'],

soptDesc: {eq:'On', gt:'After', lt:'Before'},
                                  dataInit:function(el){
                                      $(el).datepicker({dateFormat:'dd M yy'}).change(function(){$("#userlist")[0].triggerToolbar();});
                                  }
                           }
}

]

And have only the StartDate filter operator values show up as "On/After/Before", leaving the User filter operator as "equal".

If there is an obvious way to make this work that I'm missing, forgive me for making this request. Otherwise, I've found a way to make this work by making a few minor changes to the grid.filter.js which I could provide if that's appropriate.

Thanks,

Jay

05/04/2013
21:01

younger

New Member

Members

Forum Posts: 2

Member Since:
03/04/2013

Offline

Since no one said not to, here is the patch file for grid.filter.js. It's a minor tweak, only 13 lines but it enables the functionality described, hopefuly some variant of it could make it into the code stream. If you save the following as grid.filter.patch, you can apply it to the grid.filter.js code from https://github.com/tonytomov/jqGrid/tree/master/js on linux via: # patch grid.filter.js < grid.filter.patch

If you have the distribution as a whole unit, you'll need to make the changes manually.

------------------------------------ grid.filter.patch below ---------------------------------------

--- grid.filter.js   2013-04-03 14:20:20.169886542 -0700
+++ gridsod.filter.js   2013-04-03 14:20:20.184888806 -0700
@@ -53,6 +53,7 @@
        errorcheck : true,
        showQuery : true,
        sopt : null,
+       soptDesc : null,
        ops : [
            {"name": "eq", "description": "equal", "operator":"="},
            {"name": "ne", "description": "not equal", "operator":"<>"},
@@ -396,7 +397,11 @@
                        if(so===0) {
                            rule.op = that.p.ops[ina].name;
                        }
-                       s += "<option value='"+that.p.ops[ina].name+"'>"+that.p.ops[ina].description+"</option>";
+                       if (cm.searchoptions.soptDesc && cm.searchoptions.soptDesc[that.p.ops[ina].name] != undefined) {
+                           s += "<option value='"+that.p.ops[ina].name+"'" +selected+">"+cm.searchoptions.soptDesc[that.p.ops[ina].name]+"</option>";
+                       } else {
+                           s += "<option value='"+that.p.ops[ina].name+"'>"+that.p.ops[ina].description+"</option>";
+                       }
                        so++;
                    }
                }
@@ -492,7 +497,11 @@
                ina = $.inArray(op[i],aoprs);
                if(ina !== -1) {
                    selected = rule.op === that.p.ops[ina].name ? " selected='selected'" : "";
-                   str += "<option value='"+that.p.ops[ina].name+"'"+selected+">"+that.p.ops[ina].description+"</option>";
+                   if (cm.searchoptions.soptDesc && cm.searchoptions.soptDesc[this.p.ops[ina].name] != undefined) {
+                       str += "<option value='"+that.p.ops[ina].name+"'" +selected+">"+cm.searchoptions.soptDesc[this.p.ops[ina].name]+"</option>";
+                   } else {
+                       str += "<option value='"+that.p.ops[ina].name+"'"+selected+">"+that.p.ops[ina].description+"</option>";
+                   }
                }
            }
            ruleOperatorSelect.append( str );

08/04/2013
12:47

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Thank you for the recommendation and code provided. I will look this to be added in the next releases.

Thank you

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
26 Guest(s)

Currently Browsing this Page:
1 Guest(s)