I have a simple web page with a single button that brings up a WebDialogWindow. This works fine !!!
Now try putting a WebDateChooser control in the WebDialogWindow. Note the code is :-
<head runat="server">
<title>Dialog Test</title>
<script type="text/javascript">
dialog.show();
}
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
AutoSubmit="False">
<ClientSideEvents MouseDown="WebImageButton1_MouseDown" />
</igtxt:WebImageButton>
<cc1:WebDialogWindow ID="WebDialogWindow1" runat="server" Height="300px" Width="400px"
InitialLocation="Centered" Modal="true" WindowState="Hidden" StyleSetName="Default"
StyleSetPath="~/ig_res/">
<Header CaptionText="Dialog Test" CaptionAlignment="Center">
</Header>
<ContentPane>
<Template>
<igsch:WebDateChooser ID="WebDateChooser1" runat="server" Style="left:30px; top:30px;">
</Template>
</ContentPane>
</cc1:WebDialogWindow>
</div>
</body>
When I run this page in my browser, and click on the button, the WebDialogWindow appears with the blank (Null) WebDateChooser.
Now click on the drop down button to bring up the calendar section of the WebDateChooser, and nothing appears.
Close the WebDialogWindow, and lo and behold the calendar section is now visible !!!
Selecting the date causes the calendar to disappear.
Now again click the button to bring up the WebDialogWindow, and the WebDateChooser has the correct date that was selected above.
This interaction of dialog window and date selection is one which I would use a lot, but alas without a quick fix, looks like I will have to revert to using other controls.
Note I am using the latest 2008 V1 version of NetAdvantage, and VS 2008 (full version, not RTM etc).
Any idea why this is happening ?
I think the calendar portion is being shown behind the dialog box. I am having the same problem. If your dialog window is small enough you should see it pop up. I am going to submit a support incident for it. I need it fixed quickly.
Yes, the problem is with the zorder !!!
I got a workaround for this problem from Tony Lombardo at Infragistics, and he has apparently submitted a bug report for this. The text (and code) of the email I got from Tony is shown below. The solution seems to work fine, and I now have several dialog windows with other Infragistics controls working perfectly'
<EMail from Tony Lombardo>
Been looking into this deeper. In my attempts I wasn't able to modify the z-index of the dialog window in a modal scenario, with out some script. The z-index that you set in CSS only applies for a non-modal scenario it looks like. I'm not sure if there's a bug here or if that's the intended behavior, but I've fired off a couple of emails to verify. Either way, here's a bit of trick javscript to force the dialog window to use a z-index that you want. It replaces one of the WebDialogWindow private functions which is generally a no-no, but until I find a better way to do this through the public API, the script below will have to suffice. I added mine to the pageLoad client-side function, so that it will get executed during the pageLoad event (fired by AJAX). The only thing you really need to modify is the line where you see zIndex=100. In the script included with the product this is 99999. function pageLoad(args){
$IG.DialogMoveBehavior.prototype._doZ=function(lid, elem, lidZ){ this._newZ = this._oldZ = $util.getStyleValue(null, 'zIndex', elem); if(!lidZ) lidZ = $util.toInt($util.getStyleValue(null, 'zIndex', lid), 0); if(lidZ < 10) lid.style.zIndex = lidZ = 100; //z-index will default to 100 in a modal scenario if($util.toInt(this._oldZ, 0) <= lidZ) elem.style.zIndex = this._newZ = lidZ + 1; return lidZ;};
<End of EMail>
Hope this provides a quickfix for your problems !! (Thank Tony, not me)
Hi,
I Read your solution im also facing same problem. but from the email of tony still i dont know how to put code ane where to put? can you please help me for it! im new in this programing field specially with java!! please tell me exactly where and what i put this function.
This is the code for my web dialog.
<ig:WebDialogWindow ID="MSG" runat="server" Height="338px" InitialLocation="Centered"
Modal="true" Style="line-height: normal" Width="518px" >
<Header CaptionAlignment="Left" CaptionText="Delegation Details">
<CloseBox Visible="False" />
<ContentPane BackColor="White">
<div style="position: relative; text-align: center">
<br /><igsch:WebDateChooser id="WebDateChooser1" runat="server" BackColor="White">
<CalendarLayout Culture="English (United States)">
</CalendarLayout>
</igsch:WebDateChooser>
</ig:WebDialogWindow>
Hi Tony,
i have fix the problem with FF by changething the if(lidZ <= 99999) now the script is working for both IE and FF
function pageLoad(args){ $IG.DialogMoveBehavior.prototype._doZ= function(lid, elem, lidZ) { this._newZ = this._oldZ = $util.getStyleValue(null, 'zIndex', elem); if(!lidZ) lidZ = $util.toInt($util.getStyleValue(null, 'zIndex', lid), 0); if(lidZ <= 99999) { lid.style.zIndex = lidZ = 101; //z-index will default to 100 in a modal scenario } if($util.toInt(this._oldZ, 0) <= lidZ) { elem.style.zIndex = parseInt(this._newZ = lidZ + 1); } return lidZ; }; }
Thanx
function pageLoad(args){
this Script only work with IE, but not in FF, i have enabled Modal="True". but when Modal is not enable controls work fine. what is the fix for this script to work with FF
thnx
Thank you very much for your replay.
I already using trying have the code which one you sent to me. i copyed from your post only. but still its now working with my form. Im using content page, i have master page.
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language="javascript" type="text/javascript">
function(lid, elem, lidZ)
if(!lidZ)
if(lidZ < 10)
lid.style.zIndex = lidZ = 100; //z-index will default to 100 in a modal scenario
elem.style.zIndex = this._newZ = lidZ + 1;
<ig:WebDialogWindow ID="MSG" runat="server" Height="352px" InitialLocation="Centered"
Modal="True" Style="line-height: normal " Width="518px" BackColor="White" Visible="False" >
<div style="position: relative; text-align: center" align="center">
<br />
<TABLE style="WIDTH: 469px; height: 279px;"><TBODY><TR><TD style="WIDTH: 100px; font-weight: bold; font-size: 10pt; height: 26px;" align="left">Department</TD><TD colSpan=5 style="height: 26px" align="left"><asp:DropDownList id="cmbDepartment" runat="server" Width="311px"></asp:DropDownList></TD></TR><TR><TD style="WIDTH: 100px; HEIGHT: 23px; font-weight: bold; font-size: 10pt;" align="left">Division</TD><TD style="HEIGHT: 23px" colSpan=5 align="left"><asp:DropDownList id="cmbDivision" runat="server" Width="310px"></asp:DropDownList>
<asp:Label ID="ID" runat="server"></asp:Label></TD></TR><TR><TD style="WIDTH: 100px; HEIGHT: 23px; font-weight: bold; font-size: 10pt;" align="left">Delegate To</TD><TD style="HEIGHT: 23px" colSpan=5 align="left"><asp:DropDownList id="cmbDelegateTo" runat="server" Width="310px"></asp:DropDownList></TD></TR><TR><TD style="WIDTH: 100px; HEIGHT: 23px; font-weight: bold; font-size: 10pt;" align="left">Start Date</TD><TD style="HEIGHT: 23px" colSpan=5 align="left"><igsch:WebDateChooser id="txtStartDate" runat="server" BackColor="White">
</igsch:WebDateChooser></TD></TR><TR><TD style="WIDTH: 100px; HEIGHT: 23px; font-weight: bold; font-size: 10pt;" align="left">End Date</TD><TD style="HEIGHT: 23px" colSpan=5 align="left"><igsch:WebDateChooser id="txtEndDate1" runat="server" BackColor="White" EnableAppStyling="True">
</TD></TR><TR><TD style="WIDTH: 100px; HEIGHT: 23px; font-weight: bold; font-size: 10pt;" align="left">
Comment(s)</TD><TD style="HEIGHT: 52px" colSpan=5 align="left"><asp:TextBox id="txtComment" runat="server" Height="53px" Width="306px" TextMode="MultiLine" MaxLength="255"></asp:TextBox></TD></TR><TR><TD style="WIDTH: 100px; font-weight: bold; font-size: 10pt; height: 34px;" align="left"></TD><TD colSpan=5 style="height: 34px" align="left">
<asp:Button ID="btnSave" runat="server" BackColor="White" ForeColor="#0000C0"
Text="Save" ToolTip="Please Click On Button To Update Changes." Width="61px" />
<asp:Button ID="btnClose" runat="server" BackColor="White" ForeColor="#0000C0" Text="Cancel"
ToolTip="Please Click on Button To Close window." Width="61px" /></TD></TR></TBODY></TABLE>
</div>
</asp:Content>
This is my code what im doing now. Please try to help me out from it.
Thanking you
It is generally preferable to place in the Head section, but you can place javascript code anywhere. Of course you would need to place it outside of your control:
The javascript file is just a text file that has a .js extension. Just place the function in the file.