Hi,
I am trying to implement functionality where by all the controls on my aspx are covered by a div during a long running process.
This is for a business app which will run on IE6. (Yes I know.)
I am trying to place a div over all controls on the page from the OnClientClick event of a button contained in an ascx which is on an aspx.
It almost works, however, even when I set the z-index of the div to 1000000 the Rad Menu is still on top. When I check the z-index using the IE Developer Toolbar it says that the Rad Menu z-index is 7000 (the default) and the div is 1000000. See the .jpg attached.
When I set the z-index of the menu to less than the ascx then it works, however, that means that the menu drop downs are also covered.
So why is the menu on top? How can I cover all the controls to stop users fiddling while the upload is running?
Is there a way to temporarily bring the ascx to the front while processing and then send it back when finished?
Any help is appreciated.
Here is my code.
default.master that contains a RadMenu and content place holders contp1 and contp2.
BulkLoad.aspx which is derived from default.master.
The BulkUploadControl contains this:
I am trying to implement functionality where by all the controls on my aspx are covered by a div during a long running process.
This is for a business app which will run on IE6. (Yes I know.)
I am trying to place a div over all controls on the page from the OnClientClick event of a button contained in an ascx which is on an aspx.
It almost works, however, even when I set the z-index of the div to 1000000 the Rad Menu is still on top. When I check the z-index using the IE Developer Toolbar it says that the Rad Menu z-index is 7000 (the default) and the div is 1000000. See the .jpg attached.
When I set the z-index of the menu to less than the ascx then it works, however, that means that the menu drop downs are also covered.
So why is the menu on top? How can I cover all the controls to stop users fiddling while the upload is running?
Is there a way to temporarily bring the ascx to the front while processing and then send it back when finished?
Any help is appreciated.
Here is my code.
default.master that contains a RadMenu and content place holders contp1 and contp2.
BulkLoad.aspx which is derived from default.master.
<%@ Page Title="" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true"
CodeBehind="BulkLoad.aspx.cs" Inherits="MyProject.WebApp.BulkLoad" %>
<%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Controls/BulkUploadControl.ascx" TagName="BulkUpload" TagPrefix="cag" %>
<%@ Register Src="~/Controls/BulkUploadAuditControl.ascx" TagName="BulkUploadAudit"
TagPrefix="cag" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"head"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"BottomPane"
runat
=
"server"
>
<
br
/>
<
div
class
=
"level2_tabstrip"
>
<
rad:RadTabStrip
RegisterWithScriptManager
=
"true"
AutoPostBack
=
"True"
SelectedIndex
=
"1"
MultiPageID
=
"RadMultiPage1"
ID
=
"rtsBulkLoad"
runat
=
"server"
Skin
=
"WebBlue"
>
<
Tabs
>
<
rad:RadTab
Text
=
"Upload"
PageViewID
=
"Upload"
Selected
=
"True"
>
</
rad:RadTab
>
<
rad:RadTab
Text
=
"Audit"
PageViewID
=
"Audit"
>
</
rad:RadTab
>
</
Tabs
>
</
rad:RadTabStrip
>
</
div
>
<
div
class
=
"level2_content"
>
<
rad:RadMultiPage
RenderSelectedPageOnly
=
"true"
ID
=
"RadMultiPage1"
runat
=
"server"
SelectedIndex
=
"1"
Width
=
"900"
>
<
rad:RadPageView
ID
=
"Upload"
runat
=
"server"
Selected
=
"true"
>
<
cag:BulkUpload
runat
=
"server"
ID
=
"BulkUpload1"
BatchTypeDesc
=
""
/>
</
rad:RadPageView
>
<
rad:RadPageView
ID
=
"Audit"
runat
=
"server"
>
<
cag:BulkUploadAudit
runat
=
"server"
ID
=
"BulkUploadAudit1"
BatchTypeDesc
=
""
/>
</
rad:RadPageView
>
</
rad:RadMultiPage
>
</
div
>
</
asp:Content
>
The BulkUploadControl contains this:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BulkUploadControl.ascx.cs"
Inherits="Myproject.WebApp.Controls.BulkUploadControl" %>
<%@ Register TagPrefix="rad" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<
script
language
=
'javascript'
type
=
'text/javascript'
>
function showLoading() {
document.getElementById('blackOut').style.display = 'block';
document.getElementById('blackOut').style.height = '500px';
document.getElementById('blackOut').style.width = '942px';
}
</
script
>
<
rad:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
/>
<
asp:Panel
runat
=
"server"
ID
=
"pnlAccessDenied"
Visible
=
"true"
>
You do not have permission for this function
</
asp:Panel
>
<
asp:Panel
runat
=
"server"
ID
=
"pnlAccessOk"
Visible
=
"false"
>
<
br
/>
<
asp:Label
ID
=
"lblTitle"
Font-Bold
=
"True"
Font-Size
=
"X-Large"
runat
=
"server"
Font-Names
=
"Arial"
></
asp:Label
>
<
br
/>
<
br
/>
<
asp:Label
ID
=
"lblText"
Font-Bold
=
"False"
Font-Size
=
"Small"
runat
=
"server"
Font-Names
=
"Arial"
></
asp:Label
>
<
br
/>
<
br
/>
<
div
id
=
"blackOut"
style="display: none; z-index: 1000000; position: absolute; background-color: black;
filter: alpha(
opacity
=
70
); -moz-opacity: 0.7; opacity: 0.7; top: -300px;
left: -10px; height: 1000px; width: 1500px;">
<
table
width
=
"1000px"
style
=
"height:1000px;"
>
<
tr
>
<
td
align
=
"center"
valign
=
"middle"
>
<
h2
style
=
"color: White; font-weight: bold"
>
Processing...</
h2
>
</
td
>
</
tr
>
</
table
>
</
div
>
<
table
width
=
"850"
border
=
"0"
cellspacing
=
"0"
cellpadding
=
"10"
class
=
"table_grid"
>
<
tr
>
<
td
>
<
b
>Upload</
b
>
</
td
>
<
td
>
<
asp:Label
runat
=
"server"
ID
=
"lblReportingPeriodStatus"
ForeColor
=
"Red"
Visible
=
"false"
></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
colspan
=
"100%"
>
<
input
class
=
"textbox"
size
=
"100"
type
=
"file"
id
=
"File1"
runat
=
"server"
name
=
"File1"
/>
<
asp:Button
ID
=
"buttonSubmit"
class
=
"button"
runat
=
"server"
OnClick
=
"btnSubmit_OnClick"
OnClientClick
=
"showLoading();"
Text
=
"Upload"
Height
=
"23px"
/>
<
br
/>
<
br
/>
<
table
width
=
"850"
class
=
"table_grid3"
>
<
tr
>
<
td
width
=
"200"
>
Local Path
</
td
>
<
td
class
=
"td_clear"
>
<
asp:Label
runat
=
"server"
ID
=
"lblLocalPath"
></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
>
Batch ID
</
td
>
<
td
class
=
"td_clear"
>
<
asp:Label
runat
=
"server"
ID
=
"lblBatchID"
></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
>
Loaded to Staging
</
td
>
<
td
class
=
"td_clear"
>
<
asp:Image
ID
=
"Image2a"
runat
=
"server"
ImageUrl
=
"~/Images/gtick01.gif"
Visible
=
"false"
/>
<
asp:Image
ID
=
"Image2b"
runat
=
"server"
ImageUrl
=
"~/Images/gcross01.gif"
Visible
=
"false"
/>
</
td
>
</
tr
>
<
tr
>
<
td
>
Status Message
</
td
>
<
td
class
=
"td_clear"
>
<
asp:Label
runat
=
"server"
ID
=
"lblStatusMessage"
></
asp:Label
>
</
td
>
</
tr
>
</
table
>
<
asp:Label
runat
=
"server"
ID
=
"lblSaveResults"
></
asp:Label
><
br
/>
<
asp:Label
runat
=
"server"
ID
=
"lblLoadResults"
></
asp:Label
><
br
/>
</
td
>
</
tr
>
</
table
>
<
br
/>
<
rad:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AutoGenerateColumns
=
"False"
AllowAutomaticDeletes
=
"false"
AllowAutomaticInserts
=
"false"
AllowAutomaticUpdates
=
"false"
OnItemDataBound
=
"RadGrid1_ItemDataBound"
EnableAJAX
=
"True"
Width
=
"850px"
AllowPaging
=
"True"
PageSize
=
"50"
Skin
=
"WebBlue"
Visible
=
"false"
>
<
PagerStyle
AlwaysVisible
=
"true"
Mode
=
"NumericPages"
/>
<
SelectedItemStyle
CssClass
=
"selectedItem"
/>
<
EditItemStyle
CssClass
=
"selectedItem"
/>
<
ExportSettings
IgnorePaging
=
"true"
/>
<
MasterTableView
CommandItemDisplay
=
"Top"
GridLines
=
"Horizontal"
EditMode
=
"EditForms"
TableLayout
=
"Auto"
AutoGenerateColumns
=
"False"
>
<
CommandItemSettings
ShowExportToCsvButton
=
"true"
/>
<
Columns
>
<
rad:GridBoundColumn
Visible
=
"false"
UniqueName
=
"field1"
HeaderText
=
"field1"
DataField
=
"field1"
/>
<
rad:GridBoundColumn
HeaderStyle-Width
=
"50px"
UniqueName
=
"Row"
HeaderText
=
"Row"
DataField
=
"Row"
/>
<
rad:GridBoundColumn
HeaderStyle-Width
=
"50px"
UniqueName
=
"Column"
HeaderText
=
"Column"
DataField
=
"Column"
/>
<
rad:GridBoundColumn
HeaderStyle-Width
=
"100px"
UniqueName
=
"ColumnName"
HeaderText
=
"Column Name"
DataField
=
"columnName"
/>
<
rad:GridBoundColumn
HeaderStyle-Width
=
"100px"
UniqueName
=
"ColumnType"
HeaderText
=
"Column Type Expected"
DataField
=
"columnType"
/>
<
rad:GridBoundColumn
HeaderStyle-Width
=
"100px"
UniqueName
=
"ColumnValue"
HeaderText
=
"Column Value"
DataField
=
"columnValue"
/>
<
rad:GridBoundColumn
UniqueName
=
"ErrorText"
HeaderText
=
"Error"
DataField
=
"ErrorText"
/>
</
Columns
>
</
MasterTableView
>
</
rad:RadGrid
>
</
asp:Panel
>