Forum
Log In
Home
Topic RSS
15:23
16/12/2008
Offline
Hi Tony, this may belong in the bugs section, but I'm hoping I'm just doing something wrong in setting up the grid/subgrid. I noticed this behavior first on IE, but notice now that it occurs in FF as well, and it's easier to trap in FBug. I have a reproducible test case...finally figured out the most reliable way to make it happen.
In short (using 3.5A2 and grids as subgrids), I'm finding that when I:
1. expand a grid row to get the subgrid,
2. then launch a dialog (let's say the Add New dialog),
3. a <div> gets created with aria-labelledby="ui-dialog-title-editcntmylinks_grid_table_<rowid>_t",
4. inside of which is another <div> with id="editcntmylinks_grid_table_<rowid>_t" that holds the form.
4. then cancel the dialog, the <div> with aria-labelledby="ui-dialog-title-editcntmylinks_grid_table_<rowid>_t" goes away and everything is fine,
5. and here's where the odd behavior starts, if I collapse the subgrid, the <div> which held the form (id="editcntmylinks_grid_table_<rowid>_t") comes back, but is display:none.
Now when I re-expand the same subgrid, and re-open the "add new" dialog, I see a new <div> with aria-labelledby="ui-dialog-title-editcntmylinks_grid_table_<rowid>_t", inside of which is now a duplicate <div> with ID id="editcntmylinks_grid_table_<rowid>_t" that holds the form. As such (a duplicated <div>) the submit and cancel buttons don't work and everything gets into a messed up state. And finally, if I collapse the subgrid, I get yet another duplicated <div> (id="editcntmylinks_grid_table_<rowid>_t") with display:none.
Does this problem make sense/sound familiar? I can setup a test case if needed.
Thanks,
Adam
Here is the full grid setup - I've commented out a lot (trying to simplify in case it was something in my grid setup).
jQuery("#mylinks_grid_table").jqGrid({
afterInsertRow:function(row_id,rData) {
if(rData['flag'] == 'no') {
jQuery("#mylinks_grid_table").setCell(row_id,'flag',"<img src='.assets/images/bullet_g.png'>",'',{title:'OK : This link has not been flagged as hazardous.'});
} else {
jQuery("#mylinks_grid_table").setCell(row_id,'flag',"<img src='.assets/images/bullet_r.png'>",'',{title:'WARNING : This link my be hazardous!'});
}
if(rData['share'] == 'yes') {
// jQuery("#mylinks_grid_table").setCell(row_id,'share','',{color:'#CC0000'});
// } else {
jQuery("#mylinks_grid_table").setCell(row_id,'share',"<img src='.assets/images/check.png'>",'',{title:'This link has been shared'});
}
},
caption: 'My Family\\'s Links',
colModel :[
{name:'id', index:'id', width:40, align:'center',editable:false,editoptions:{readonly:true,size:10},hidden:true},
{name:'flag', index:'flag', width:50, align:'center',editable:false,editoptions:{readonly:true},hidden:false},
{name:'added', index:'added', width: 70, editable:false, sortable:true, hidden:true},
{name:'share', index:'share', width: 60, align:'center',editable:true,edittype:"checkbox",editoptions:{value:"yes:no"}},
{name:'name', index:'name', width: 200, editable:true,},
{name:'link', index:'link', width: 321, editable:true, formatter:'link',formatoptions:{target:"_new"}}
],
colNames:['ID','Flag','Added','Share','Name','Link'],
datatype: 'xml',
forceFit: false,
height: 572,
hidegrid: false,
imgpath: gridimgpath,
mtype: 'GET',
loadui: 'disable',
pager: jQuery('#mylinks_grid_nav'),
rowNum:20, rowList:[40,60,80],
shrinkToFit: false,
sortname: 'id',
sortorder: 'asc',
subGrid: true,
subGridRowColapsed:function(subgrid_id, row_id) {
// $("#editcntmylinks_grid_table_"+row_id+"_t").remove();
},
subGridRowExpanded:function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<div style='border:0px solid #ccc; border-bottom:1px solid #999;'><table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll' style='text-align:center;'></div></div>");
jQuery("#"+subgrid_table_id).jqGrid({
afterInsertRow:function(row_id,rData) {
// if(rData['haslink'] == 'yes') {
// jQuery("#"+subgrid_table_id).setCell(row_id,'haslink',"<img src='.assets/images/check.png'>",'',{title:'This link has been shared'});
// }
},
datatype:"xml",
colModel: [
{name:"id",index:"id",width:40,align:'center',hidden:false},
{name:"fid",index:"fid",width:40,align:'center',hidden:true},
{name:"username",index:"username",width:500,align:'left',editable:false,edittype:'select',editoptions:{title:'Use <ctrl> left-click to select multiple people.',fixedsize:5,multiple:true,value:":"}}
],
colNames: ['ID','Family ID','Name'],
height:"auto",
imgpath: gridimgpath,
mtype: 'GET',
pager:pager_id,
pgbuttons:false,
pgtext:false,
// rowNum:10,
sortname:'username',
sortorder:'asc',
url:".assets/admin_people_tbl.php?oper=selppl2lnk&fid="+fid+"&lid="+row_id,
width:400
}).navGrid("#"+pager_id,
{edit:false,search:false},
{},
{closeAfterAdd:true,
height:160,
modal:true,
mtype:'GET',
recreateForm:true,
reloadAfterSubmit:true,
url:'.assets/admin_funcs.php?coper=addppl2lnk&lid='+row_id,
addCaption:'Add Link to People',
beforeShowForm:function(formid){
alert(pager_id);
// $("#editcntmylinks_grid_table_"+row_id+"_t").remove();
// $.ajax({
// url:".assets/admin_funcs.php?oper=selpplsel&fid="+fid+"&lid="+row_id,
// datatype:"script",
// mtype:"GET",
// success:function(response) {
// $('#username',formid).children().remove().end().html(response);
// }
// })
},
// onclickSubmit:function(formid){
// alert("editcntmylinks_grid_table_"+row_id+"_t");
// $("#editcntmylinks_grid_table_"+row_id+"_t").remove();
// var retarr = {};
// this.addData={"uid":row_id};
// retarr={"uid":row_id};
// return retarr;
// },
// afterComplete:function(formid){
// $("#editcntmylinks_grid_table_"+row_id+"_t").remove();
// $.ajax({
// url:".assets/admin_funcs.php?oper=selpplsel&fid="+fid+"&lid="+row_id,
// datatype:"script",
// mtype:"GET",
// success:function(response) {
// $('#username',formid).children().remove().end().html(response);
// }
// })
// }
},
{mtype:'GET',
caption:'Delete User From Group',
url:'.assets/admin_funcs.php?coper=delppl2lnk&lid='+row_id
// onclickSubmit:function(){
// var sr=jQuery("#"+subgrid_table_id).getGridParam('selrow');
// var rowData=jQuery("#"+subgrid_table_id).getRowData(sr);
// this.delData={"uid":rowData['uid'],"gid":rowData['gid']};
// retarr={"uid":rowData['uid'],"gid":rowData['gid']};
// return retarr;
// },
// afterComplete:function(formid){
// $.ajax({
// url:".assets/admin_access_users_tbl.php?oper=grpsel&uid="+uid,
// datatype:"script",
// mtype:"POST",
// success:function(response) {
// $('#gname').children().remove().end().html(response);
// }
// })
// }
}
)
},
url:'.assets/admin_funcs.php?oper=sellnk&fid='+fid,
viewrecords: true,
width: 658
}).navGrid('#mylinks_grid_nav',
{},
{closeAfterEdit:false,
editCaption:'Edit Link',
height:150,
reloadAfterSubmit:true,
url:'.assets/admin_funcs.php?oper=updlnkx',
width:360
},
{addCaption:'Add Link',
clearAfterAdd:true,
closeAfterAdd:false,
height:150,
reloadAfterSubmit:true,
url:'.assets/admin_funcs.php?oper=addlnk',
width:360,
beforeShowForm:function(formid){
jQuery("#link",formid).val("http://");
},
afterComplete:function(serverResponse,postdata,formid){
jQuery("#link",formid).val("http://");
}
},
{caption:'Delete Link',
reloadAfterSubmit:false,
url:'.assets/admin_funcs.php?oper=dellnk&id='
},
{}
).navButtonAdd("#mylinks_grid_nav",
{caption:'',
onClickButton:function(){
jQuery("#mylinks_grid_table").setColumns({height:280,width:280});
},
position:"last",
title:'Select columns'
});
});
07:17
Moderators
30/10/2007
Offline
Hello Adam,
Thank you very much for this.
Short - In the next alfa release (comming soon) I do not support (and will not support) jQuery UI Dialog. Using UI Dilaog causes a lot of problems and moreover it is so slow in IE. Finaly I make a decision to implement my own modal function which can be seen in the upcomming release. It is not finished yet, but I hope that it will be done until the finall.
If you switch to jqModal you will not have such problem.
Best 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.
11:37
16/12/2008
Offline
Thanks Tony, that sounds good to me! I'm looking forward to jqModel...sounds very interesting.
In the meantime, I can work around the problem with
$(”#editcntmylinks_grid_table_”+row_id+”_t”).remove();
$("#delcntmylinks_grid_table_"+row_id+"_t").remove();
},
it catches most of the problems most of the time, but still get into situations where UI Dialogs still misbehave.
Thanks again,
Adam
19:22
16/12/2008
Offline
Tony, thanks so much for the fixes in Alpha 3 - formedit modal's are working great! No more phantom DIV's.
I noticed another pesky problem was resolved too. I posted this a long time ago - a problem in IE setting formedit <select> field <option> lists dynamically ( http://www.trirand.com/blog/?p.....38;ret=all )
Finally, it seems like dialog positioning is more normal/predictable, and maybe it's my imagination, but performance seems to be better.
I also noticed that horizontal grid scrolling works smoothly when a vertical scrollbar is present.
Thanks again!
Adam
Most Users Ever Online: 715
Currently Online:
171 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
