jQuery Grid Plugin - jqGridForum

Topic RSS

DatePicker won't show up in advanced search dialog

30/04/2011
09:19

tadams

Beijing, China

Member

Members

Forum Posts: 5

Member Since:
26/03/2011

Offline

Hello again,

I'm trying desperately getting the jquery DatePicker control showing up in the search dialog for the advanced resp. multiple search.

I was trying to set the dataInit property of the searchoptions to something like :

searchoptions : { dataInit : function(elem){ setTimeout(function(){jQuery(elem).datepicker({dateFormat:'yy-mm-dd'});}, 100);}}, …

However the DatePicker control does not show up, once i opened the search dialog and tried to set a search value for a date field. Digging in firebug i found at last that the DOM strcuture for DatePicker is actually created, so actually the dataInit function gets called. But no matter what i do, it simply doesn't show up. I also tried to use the dataInit without the setTimeout although in the documentation it was clearly recommended to put that in too. Another thing worth to mention, hitting the ENTER key while in the corresponding date field sets the value to a wellfromed date string of the current date like "2011-05-01″.

Attached the whole source for reference, i'm using recent browser types (FF 3.6, Opera 11, IE 9) the phenomenon in all of the is the same (and actually no javascript error is thrown at all).

$("#blog_list_All").jqGrid({
       url : '/blog/page/ajax/get.do', datatype : 'json', mtype : 'get',
           colNames : ['Id', 'Comment', 'Date', 'User', 'Status', 'Edit', 'Delete'],
           colModel : [
                   {name : 'id', index : 'id', width : 30, align : 'right', sortable : true, resizable : true, search : true},
                   {name : 'text', index : 'text', width : 300, align : 'left', sortable : true, resizable : true, search : true},
                   {name : 'date', index : 'date', width : 80, align : 'right', sortable : true, resizable : true,
                       search : true,
                       searchoptions : {dataInit : function(elem){ setTimeout(function(){jQuery(elem).datepicker({dateFormat:'yy-mm-dd'});}, 100);}}},
                   {name : 'user', index : 'user', width : 150, align : 'left', sortable : true, resizable : true, search : true},
                   {name : 'status', index : 'status', width : 150, align : 'left', sortable : true, resizable : true, search : true},
                   {name : 'editLink', index : 'editLink', width : 80, align : 'center', sortable : true, resizable : true, search : false},
                   {name : 'deleteLink', index : 'deleteLink', width : 80, align : 'center', sortable : true, resizable : true, search : false}
               ], pager : 'blog_pager_tab1_All', rowNum : 10, rowList : [10, 20, 30],
               sortname : 'id', sortorder : 'asc', viewrecords : true, caption : 'Blog list',
               loadComplete : OnGridLoadComplete,

               search : {
                   caption: "Search ...",
                   Find: "Find", Reset: "Reset",
                   multipleSearch: true,
                   overlay: false,
                   sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
                   odata: ["equal", "not equal", "less", "less or equal", "greater", "greater or equal"],
                   groupOps : [{ op: "AND", text:"all"}, { op: "OR", text:"any"}],
                   matchText: "match", rulesText: "rules"
               }
   }).jqGrid('navGrid',
       '#blog_pager_tab1_All',{edit:false,add:false,del:false,search:true,refresh:true},
       {}, // use default settings for edit
       {}, // use default settings for add
       {}, // delete instead that del:false we need this
       {multipleSearch : true}, // enable the advanced searching
       {closeOnEscape:true} // allow the view dialog to be closed when user press ESC key
   );
   jQuery("#blog_list_All").jqGrid("setGridHeight","340")
   jQuery("#blog_list_All").jqGrid("filterToolbar", {"autosearch":true,"stringResult":true});
   ....

   jQuery(".createLink").button({
       icons : {primary : 'ui-icon-trash'},
       text : false
   });


   jQuery(".searchButton").button({
       icons : {primary : 'ui-icon-trash'},
       text : false
   });

   jQuery(".searchButton").click(function (){
       jQuery("#blog_list_All").jqGrid('searchGrid', {caption: "Search ...", Find: "Find", Reset: "Reset",
multipleSearch: true, overlay: false, sopt: ["eq", "ne", "lt", "le", "gt", "ge"],
odata: ["equal", "not equal", "less", "less or equal", "greater", "greater or equal"],
groupOps : [{ op: "AND", text:"all"}, { op: "OR", text:"any"}],
matchText: "match", rulesText: "rules"});
   });
   ....
});

Any help would be highly appreciated,

C. Thomas

Beijing, China

04/05/2011
13:09

tadams

Beijing, China

Member

Members

Forum Posts: 5

Member Since:
26/03/2011

Offline

OKay, i figured it out myself, it seems to be some king of bug with jquery itself:

http://stackoverflow.com/quest.....displaying

The proposition there to leave out "clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px);" finally helped.

c. Thomas

20/05/2013
12:45

alisebt

New Member

Members

Forum Posts: 1

Member Since:
20/05/2013

Offline

i have same problem but the link is broken

can u help me please?

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
44 Guest(s)

Currently Browsing this Page:
1 Guest(s)