Forum



01:25

21/01/2011

Hello all. First of all I'd like to add my thanks for the excellent tool that has been made available here. It's been helping me out a lot.
Here's my issue - I have a grid where I am using form editing and I'm trying to make the edit form appear in a poition relative to the top of the viewing area as opposed to the top of the current window. In other words if the window has been scrolled down I want the dialog to appear a specified distance from the top of the current viewing area instead of what I have now which seems to be a fixed distance from the top of the currently loaded page. I managed to do this with a jQuery dialog outside of the grid but I can't get the grid dialogs to work in this way. Maybe the feature isn't implemented in this way? Or maybe I need to write a custom edit dialog instead of using the default functionality from the navigator? Any help would be appreciated. Here is the JS Header code. The positionTest jQuery dialog is working the way I want it to. Unfortunately I am stuck using IE6 in the working environment which may also be part of the problem.
function returnToFront(){
var newURL = "/" + document.forms[0].DBPath.value + "/frontPage?OpenForm"
window.location = newURL
}
function checkQueue(val, colName){
var qPatt = /BK\d\d\d\d/
if (!qPatt.test(val)) {
return [false, "Queue Name must be entered as BKxxxx where xxxx is 4 numbers"];
}
else {
return [true, ""];
}
}
function openDialog(){
jQuery("#positionTest").dialog("open");
}
jQuery(document).ready(function(){
var lastIdSel
jQuery('#grid').jqGrid({
url:"/" + document.forms[0].DBPath.value +'/PullCollectorCodes?OpenAgent',
editurl:"/" + document.forms[0].DBPath.value +'/UpdateCollectorCodes?OpenAgent',
datatype:'xml',
mtype:'POST',
altRows:true,
height:'auto',
rowNum:-1,
toppager:true,
pager:'#gridfooter' ,pgbuttons:false, pginput:false,
colNames:['Start','End', 'EmpID', 'Pre LCR 7', 'Pre LCR 11,12,13', 'LCR 7', 'LCR 11,12,13'],
colModel:[{
name:'ssnStart',
width:40,
index:'ssnStart',
editable:true,
editoptions: {maxlength:2},
editrules:{required:true, number:true}
},{ name:'ssnEnd',
width:40,
index:'ssnEnd',
editable:true ,
editoptions: {maxlength:2},
editrules:{required:true, number:true}
}, {
name:'employee',
width:80,
index:"employee",
editable:true,
edittype:'select',
editoptions:{dataUrl:"/" + document.forms[0].DBPath.value + "/agtBuildCollectorPicklist?OpenAgent"},
search:true,
stype:'select'
// searchoptions:{defaultValue:}
}, {
name:'preLcr7Queue',
width:110,
index:"preLCR7Queue",
editable:true,
edittype:'select',
editoptions:{dataUrl:"/" + document.forms[0].DBPath.value + "/agtBuildCollectorQueuePicklist?OpenAgent&QueueType=PreLCR7"}
}, {
name:'preLcrOtherQueue',
width:110,
index:"preLcrOtherQueue",
editable:true,
edittype:'select',
editoptions:{dataUrl:"/" + document.forms[0].DBPath.value + "/agtBuildCollectorQueuePicklist?OpenAgent&QueueType=PreLCROther"}
}, {
name:'postLcr7Queue',
width:110,
index:"postLcr7Queue",
editable:true,
edittype:'select',
editoptions:{dataUrl:"/" + document.forms[0].DBPath.value + "/agtBuildCollectorQueuePicklist?OpenAgent&QueueType=LCR7"}
},{
name:'postLcrOtherQueue',
width:110,
index:"postLcrOtherQueue",
editable:true,
edittype:'select',
editoptions:{dataUrl:"/" + document.forms[0].DBPath.value + "/agtBuildCollectorQueuePicklist?OpenAgent&QueueType=LCROTher"}
}]
}).navGrid('#gridfooter',
{search:false, cloneToTop:true},
{modal:true,closeAfterAdd:true, closeAfterEdit:true, checkOnSubmit:true, top:200}, // prmAdd afterSubmit:processAddReturn
{modal:true,closeAfterAdd:true, closeAfterEdit:true, checkOnSubmit:true, top:200}, //prmEdit
{}, // prmDel
{}, //prmSearch
{} // prmView
)
jQuery('#positionTest').dialog({
autoOpen: false,
width: 500,
modal: true,
position: [35, 60],
draggable: false,
buttons: {
"Continue": function(){
alert("Continue Button Pressed");
},
"Cancel": function(){
jQuery('#positionTest').dialog("close");
}
}
})// end confirmation dialog
})
Here's what I am loading in the HTML header:
jquery-ui-1.8.5.custom.css
ui.jqgrid.css
jquery-1.4.2.min.js
jquery-ui-1.8.5.custom.min.js
grid.locale-en.js
js/jquery.jqGrid.min.js
bankruptcyUiDefault.css - this is the custom jQuery UI .css
02:34

21/01/2011

Well I found a solution which mostly works. The only remaining problem is the error message dialog. For that I edited jqgridmin.js to reduce the divisor on the top .css property form 2 to 1.5 to move it down the page. It's still not relative to the viewport
For the edit dialogs I used the set of functions found at http://www.softcomplex.com/doc.....ml in order to find the current scroll and add padding in the beforeShowForm event. Here's the beforeShowForm:
beforeShowForm: function(form){
var dlgDiv = jQuery("#editmodgrid");
windowVertSize = f_clientHeight()
windowVertScroll = f_scrollTop()
topSpacing = windowVertScroll + 20
dlgDiv[0].style.left = "25%";
dlgDiv[0].style.top = topSpacing + "px";
dlgDiv[0].style.left = "25%";
},
Works fine so far in IE6 - unfortunately that'smy target environment
Most Users Ever Online: 715
Currently Online:
56 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