Z-index / stacking order when used with datagrid master / detail add or edit mode

[GoogleCodeExporter]

What steps will reproduce the problem? When you use the Master datagrid 
pattern. Click a record. Record displays in Detail datagrid. Click edit or 
add. Enter cursor into input text box. Datepicker pops up behind the add 
or edit popup.

What is the expected output? What do you see instead?
I expect the datepicker to popup in front of the add / edit mode dialog. 
It pops up correctly on x,y coords but not z.

Please provide a URL to a page displaying the problem.
It is in dev, not available. I could make it available ...

What version of the datepicker are you using? On what operating system? 
And Which Browser?
I don't have the version available. I downloaded last June. I re-
downloaded the datagrid library this week and have the latest build. 3.6.5
Windows Vista, I.E. 8

Please provide any additional information below.

Original issue reported on code.google.com by michaela...@gmail.com on 20 Nov 2009 at 4:17

[GoogleCodeExporter]

The datepicker I am using is bundled in the datagrid download: jquery.jqGrid-3.6
<pre><link rel="stylesheet" type="text/css" media="screen" href="../jquery-
development-bundle/themes/smoothness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../jquery.jqGrid-
3.6/css/ui.jqgrid.css" />
<script src="../jquery.jqGrid-3.6/jquery.js" type="text/javascript"></script>
<script src="../jquery.jqGrid-3.6/jquery-ui-1.7.1.custom.min.js" 
type="text/javascript"></script>
<script src="../jquery.jqGrid-3.6/jquery.layout.js" 
type="text/javascript"></script>
<script src="../jquery.jqGrid-3.6/js/i18n/grid.locale-en.js" 
type="text/javascript"></script>
<script src="../jquery.jqGrid-3.6/jquery.jqGrid.min.js" 
type="text/javascript"></script>
<script src="../jquery.jqGrid-3.6/jquery.tablednd.js" 
type="text/javascript"></script>
<script src="../jquery.jqGrid-3.6/jquery.contextmenu.js" 
type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var gridimgpath = "../jquery-development-bundle/themes/smoothness/images";
jQuery(document).ready(function(){
jQuery("#navgrid").jqGrid({
    url:'MasterXML.jsp?q=1',
    datatype: "xml",
    mtype:"POST",
    colNames:['ID','*Title','*Last Name','*First 
Name','*Address','*City','State','Zip','Home Phone','Work Phone','Cell 
Phone','Email','Best Contact Time','Assigned Outreach 
Person','Relations','Notes'],
    colModel:[
        {name:'visitorId',index:'visitorId', 
width:60,sorttype:"int",editable:false,editoptions:{readonly:true,size:10}},
        {name:'title',index:'title',width:40,editrules:
{required:true},editable: true,edittype:"select",editoptions:
{value:"Mr:Mr;Ms:Ms;Mrs:Mrs;Dr:Dr;Rev:Rev"}},
        {name:'lastName',index:'lastName', width:100,editrules:
{required:true},editable:true,editoptions:{size:40,maxlength: 30}},
        {name:'firstName',index:'firstName', width:100,editrules:
{required:true},editable:true,editoptions:{size:40,maxlength: 30}},
        {name:'address',index:'address', width:100, align:"right",editrules:
{required:true},editable:true,editoptions:{size:40,maxlength: 30}},
        {name:'city',index:'city', width:100,align:"right",editrules:
{required:true},editable:true,editoptions:{size:40,maxlength: 30}},
        {name:'state',index:'state',width:40,editrules:{required:true}, 
editable: true,edittype:"select",editoptions:{value:"<%
=States.getSelectJQueryDatagridColonDelimitedStates()%>"}},
        {name:'zip',index:'zip', width:50, align:"right",editrules:
{required:false},editable:true,editoptions:{size:10,maxlength: 5}},
        {name:'homePhone',index:'homePhone', width:60, 
align:"right",editrules:{required:false},editable:true,editoptions:
{size:10,maxlength:9}},
        {name:'workPhone',index:'workPhone', width:60, 
align:"right",editrules:{required:false},editable:true,editoptions:
{size:10,maxlength:9}},
        {name:'cellPhone',index:'cellPhone', width:60, 
align:"right",editrules:{required:false},editable:true,editoptions:
{size:10,maxlength:9}},
        {name:'email',index:'email', width:100, 
align:"right",editable:true,editoptions:{size:40,maxlength:100}},
        {name:'bestContactTimes',index:'bestContactTimes', 
width:60,editrules:{required:false},editable:false,editoptions:
{readonly:true,size:40}},<!-- Have add, edit, delete buttons for each item -->
        {name:'assignedId',index:'assignedId',width:100,editrules:
{required:false}, editable: true,edittype:"select",editoptions:{value:"<%
=ObjectName.getSelectGroupMembers()%>"}},
        {name:'relationId',index:'relationId',width:60,editrules:
{required:false}, editable: true,edittype:"select",editoptions:{value:"<%
=ObjectName.getSelectMembers()%>"}},
        {name:'notes',index:'notes', width:200,sortable:false,editrules:
{required:false}, editable: true,edittype:"textarea", editoptions:
{rows:"5",cols:"100"}}
    ],
    rowNum:50,
    rowList:[50,100,500,1000],
    autowidth: true,
    drag: true,
    imgpath: gridimgpath,
    pager: jQuery('#pagernav'),
    sortname: 'visitorId',
    viewrecords: true,
    sortorder: "asc",
    multiselect: false,
    caption:"Visitor List",
    processData: "Processing...",
    onSelectRow: function(ids) {
        if(ids == null) {
            ids=0;
            if(jQuery("#detailgrid").getGridParam('records') >0 ){
                jQuery("#detailgrid").setGridParam
({url:"DetailXML.jsp?q=1&id="+ids,page:1})
                .setCaption("Visit Detail: "+ids)
                .trigger('reloadGrid');
            }
        }else{
            jQuery("#detailgrid").setGridParam({url:"DetailXML.jsp?
q=1&id="+ids,page:1})
            .setCaption("Visit Detail: "+ids)
            .trigger('reloadGrid');
        }
    },
    editurl:"EditXML.jsp",
    height:300
}).navGrid('#pagernav',{view:true}, //options
{savekey: [true,13], navkeys: [true,38,40],width:800, height:500, 
reloadAfterSubmit:true, jqModal:false, closeOnEscape:true, bottominfo:"Fields 
marked 
with (*) are required"}, // edit options
{savekey: [true,13], navkeys: [true,38,40],width:800, height:500, 
reloadAfterSubmit:true,jqModal:false, closeOnEscape:true,bottominfo:"Fields 
marked 
with (*) are required"}, // add options
{reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options
{closeOnEscape:true}, // search options
{navkeys: [true,38,40],width:800, height:400,jqModal:false,closeOnEscape:true} 
// 
view options
);
jQuery("#detailgrid").jqGrid({
    url:'ZeroRecordsXML.jsp',
    datatype: "xml",
    colNames:['ID','*Contacted By','Method','Observation','Notes','*Date'],
    colModel:[
        {name:'visitId',index:'visitId', 
width:60,sorttype:"int",editable:false,editoptions:{readonly:true,size:10}},
        {name:'contactedBy',index:'contactedBy', width:200,editrules:
{required:true},editable:true,editoptions:{size:40,maxlength: 20}},
        {name:'contactedMethod',index:'contactedMethod', width:200,editrules:
{required:true},editable:true,editoptions:{size:40}},
        {name:'observationId',index:'observationId',width:200,editrules:
{required:false}, editable: true,edittype:"select",editoptions:{value:"<%
=ObjectName.getObservations()%>"}},
        {name:'notes',index:'notes', width:200,sortable:false,editrules:
{required:false}, editable: true,edittype:"textarea", editoptions:
{rows:"5",cols:"100"}},
        {name:'contactDate',index:'contactDate',sorttype:"date", 
width:80,editable:true,
            editoptions:{size:12,maxlength:8,
                dataInit:function(el){
                    $(el).datepicker({dateFormat:'yymmdd'});
                    alert("here");
                },
                defaultValue: function(){
                    var currentTime = new Date();
                    var month = parseInt(currentTime.getMonth() 
+ 1);
                    month = month <= 9 ? "0"+month : month;
                    var day = currentTime.getDate();
                    day = day <= 9 ? "0"+day : day;
                    var year = currentTime.getFullYear();
                    return year+""+month + ""+day;
                }
            },
            formoptions:{ rowpos:6, elmprefix:"(*)",elmsuffix:"  
yymmdd" },
            editrules:{required:true}
        }
    ],
    rowNum:5,
    rowList:[5,10,20,50,100],
    autowidth: false,
    drag: true,
    imgpath: gridimgpath,
    pager: jQuery('#pagerdetail'),
    sortname: 'visitId',
    viewrecords: true,
    sortorder: "asc",
    multiselect: true,
    caption:"Contact Detail",
    processData: "Processing...",
    editurl:"EditXML.jsp",
    height: 300,
    width:800
}).navGrid('#pagerdetail',
{view:true}, //options
{savekey: [true,13], navkeys: [true,38,40],width:800, height:400, 
reloadAfterSubmit:true, jqModal:false, closeOnEscape:true, bottominfo:"Fields 
marked 
with (*) are required"}, // edit options
{savekey: [true,13], navkeys: [true,38,40],width:800, height:400, 
reloadAfterSubmit:true,jqModal:false, closeOnEscape:true,bottominfo:"Fields 
marked 
with (*) are required"}, // add options
{reloadAfterSubmit:false,jqModal:false, closeOnEscape:true}, // del options
{closeOnEscape:true}, // search options
{navkeys: [true,38,40],width:800, height:400,jqModal:false,closeOnEscape:true} 
// 
view options
);

});
</script>
    </head>
    <body>
<table id="navgrid" class="scroll"></table>
<div id="pagernav" class="scroll"></div>
<div><hr 
style="background-color:#C0C0C0;width:auto;height:10px;margin:25px;"></div>
<span style="z-index:99999;"><table id="detailgrid" 
class="scroll"></table></span>
<span style="z-index:999996;"><div id="pagerdetail" 
class="scroll"></div></span></pre>

Original comment by michaela...@gmail.com on 21 Nov 2009 at 12:06

[GoogleCodeExporter]

I found the solution: Go to the css file with this class and add z-index: .ui-
datepicker {z-index: 9000; /* added */  width: 17em; padding: .2em .2em 0; }

Original comment by michaela...@gmail.com on 21 Nov 2009 at 1:11

[GoogleCodeExporter]

thanks for adding this solution.  took a few to find, but helped me address the 
problem 
of my datepicker hiding behind some form elements.  appreciated!

Original comment by thenickc...@gmail.com on 17 Jan 2010 at 6:26