Hi All,
I am trying to remove this design-time created CheckBox at run-time, client-side. I am able to remove the control in Chrome and FireFox, but IE8 is putting up a fight and I do not know why.
My Mark-Up:
In my client-side onLoad function I check the combobox's value, and, if its value is PieChart, I attempt to hide some controls on the page from the user. Setting the checkbox's visibility property to Collapse, Hidden, etc.. doesn't do anything. The same with setting its height and width to 0 -- it is still visible. If I disable it, it becomes disabled. I am able to affect the controls on its left and right -- the RadDateTimePicker and the label both disappear in IE8 perfectly fine.
Any suggestions on how to remove this finicky box would be appreciated.
I am trying to remove this design-time created CheckBox at run-time, client-side. I am able to remove the control in Chrome and FireFox, but IE8 is putting up a fight and I do not know why.
My Mark-Up:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LocalSettings.aspx.cs" Inherits="Cormant_Web_Dashboard.LocalSettings" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
link
href
=
"~/Styles/LocalSettings.css"
rel
=
"Stylesheet"
type
=
"text/css"
/>
</
head
>
<
body
onload
=
"AdjustRadWindowOnFirstLoad();"
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadStyleSheetManager
ID
=
"RadStyleSheetManager1"
runat
=
"server"
>
</
telerik:RadStyleSheetManager
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
Runat
=
"server"
>
</
telerik:RadScriptManager
>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
Runat
=
"server"
DecoratedControls
=
"All"
Skin
=
"Web20"
/>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
UpdatePanelsRenderMode
=
"Inline"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"CheckBox1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadNumericTextBox1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadComboBox1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"Label1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"Label2"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"CheckBox3"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadDateTimePicker2"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"CheckBox2"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadDateTimePicker1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadDateTimePicker2"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadButton1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadButton1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function CloseAndSave(args) {
var oWindow = GetRadWindow();
var resultArguments = new Array();
resultArguments.push(document.getElementById('<%= CheckBox1.ClientID %>').checked);
resultArguments.push($find("<%= RadNumericTextBox1.ClientID %>").get_value());
resultArguments.push($find("<%= RadComboBox1.ClientID %>").get_value());
resultArguments.push(document.getElementById('<%= CheckBox2.ClientID %>').checked);
if (document.getElementById('CheckBox2').checked == true) {
var RadDateTimePicker1 = $find("<%= RadDateTimePicker1.ClientID %>");
if (resultArguments[2] == "LineChart") {
var RadDateTimePicker2 = $find("<%= RadDateTimePicker2.ClientID %>");
if (RadDateTimePicker1.isEmpty() || RadDateTimePicker2.isEmpty()) {
alert("Please provide values for both dates.");
return;
}
else {
var Date1 = RadDateTimePicker1.get_selectedDate();
var Date2 = RadDateTimePicker2.get_selectedDate();
if ((Date2 - Date1) <
0
) {
alert("The second date should be past the first.");
return;
}
resultArguments.push(Date1.format("MM/dd/yyyy hh:mm:ss"));
resultArguments.push(Date2.format("MM/dd/yyyy hh:mm:ss"));
}
}
else if (resultArguments[2] == "PieChart") {
if (RadDateTimePicker1.isEmpty()) {
alert("Please enter a date.");
return;
}
resultArguments.push(RadDateTimePicker1.get_selectedDate().format("MM/dd/yyyy hh:mm:ss"));
resultArguments.push(null);
}
}
else {
resultArguments.push(null);
resultArguments.push(null);
}
if (document.getElementById('<%= CheckBox3.ClientID %>') != null) {
resultArguments.push(document.getElementById('<%= CheckBox3.ClientID %>').checked);
}
else {
resultArguments.push(null);
}
oWindow.close(resultArguments);
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
var doPostback = true;
function pageLoad() {
var oWindow = GetRadWindow();
properties = oWindow.argument;
if (properties) {
if (properties["AutoRefreshEnabled"] == "True") {
document.getElementById('<%= CheckBox1.ClientID %>').checked = true;
$find("<%= RadNumericTextBox1.ClientID %>").set_value(properties["AutoRefreshInterval"]);
$find("<%= RadNumericTextBox1.ClientID %>").enable();
}
doPostback = false;
$find("<%= RadComboBox1.ClientID %>").findItemByValue(properties["ChartType"]).select();
doPostback = true;
if (properties["ChartType"] == "PieChart") {
document.getElementById('<%= CheckBox3.ClientID %>').style.display = 'none';
document.getElementById('<%= Label2.ClientID %>').style.display = 'none';
//document.getElementById('<%= CheckBox3.ClientID %>').style.visibility = 'hidden';
//document.getElementById('<%= Label2.ClientID %>').style.visibility = 'hidden';
$find("<%=RadDateTimePicker2.ClientID %>").set_visible(false);
}
if (properties["TimeRestrictionEnabled"] == "True") {
document.getElementById('<%= CheckBox2.ClientID %>').checked = true;
if (properties["ChartType"] == "LineChart") {
$find("<%= RadDateTimePicker1.ClientID %>").set_enabled(true);
$find("<%= RadDateTimePicker2.ClientID %>").set_enabled(true);
$find("<%= RadDateTimePicker1.ClientID %>").set_selectedDate(new Date(properties["TimeStart"]));
$find("<%= RadDateTimePicker2.ClientID %>").set_selectedDate(new Date(properties["TimeEnd"]));
}
else if (properties["ChartType"] == "PieChart") {
$find("<%= RadDateTimePicker1.ClientID %>").set_enabled(true);
$find("<%= RadDateTimePicker1.ClientID %>").set_selectedDate(new Date(properties["TimeStart"]));
}
}
if (properties["DataPointsEnabled"] == "True") {
document.getElementById('<%= CheckBox3.ClientID %>').checked = true;
}
}
}
function OnClientSelectedIndexChanged(sender, eventArgs) {
if (doPostback) {
__doPostBack('RadComboBox1', '');
}
}
function AdjustRadWindowOnFirstLoad() {
var oWindow = GetRadWindow();
if (oWindow.argument != null) {
oWindow.argument = null;
setTimeout(function () { oWindow.autoSize(true); if ($telerik.isChrome || $telerik.isSafari) ChromeSafariFix(oWindow); }, 500);
}
}
function AdjustRadWindow() {
var oWindow = GetRadWindow();
setTimeout(function () { oWindow.autoSize(true); if ($telerik.isChrome || $telerik.isSafari) ChromeSafariFix(oWindow); }, 500);
}
//fix for Chrome/Safari due to absolute positioned popup not counted as part of the content page layout
function ChromeSafariFix(oWindow) {
var iframe = oWindow.get_contentFrame();
var body = iframe.contentWindow.document.body;
setTimeout(function () {
var height = body.scrollHeight;
var width = body.scrollWidth;
var iframeBounds = $telerik.getBounds(iframe);
var heightDelta = height - iframeBounds.height;
var widthDelta = width - iframeBounds.width;
if (heightDelta > 0) oWindow.set_height(oWindow.get_height() + heightDelta);
if (widthDelta > 0) oWindow.set_width(oWindow.get_width() + widthDelta);
oWindow.center();
}, 310);
}
</
script
>
</
telerik:RadCodeBlock
>
<
fieldset
>
<
legend
>Refresh Settings</
legend
>
<
table
>
<
tr
>
<
td
class
=
"AutoRefreshEnabled"
>
<
asp:Label
ID
=
"Label1"
runat
=
"server"
Text
=
"Auto-Refresh Enabled:"
></
asp:Label
>
</
td
>
<
td
class
=
"AutoRefreshCheckbox"
>
<
asp:CheckBox
ID
=
"CheckBox1"
runat
=
"server"
AutoPostBack
=
"True"
oncheckedchanged
=
"CheckBox1_CheckedChanged"
/>
</
td
>
<
td
class
=
"AutoRefreshNumericTextbox"
>
<
telerik:RadNumericTextBox
ID
=
"RadNumericTextBox1"
Runat
=
"server"
Label
=
"Auto-Refresh Interval (Minutes):"
MaxValue
=
"60"
MinValue
=
"0"
ShowSpinButtons
=
"True"
Value
=
"0"
Width
=
"225px"
Enabled
=
"False"
LabelCssClass
=
"riLabel LabelDisabled"
>
<
NumberFormat
DecimalDigits
=
"0"
/>
</
telerik:RadNumericTextBox
>
</
td
>
</
tr
>
</
table
>
</
fieldset
>
<
fieldset
>
<
legend
>Chart Properties</
legend
>
<
telerik:RadComboBox
ID
=
"RadComboBox1"
Runat
=
"server"
Skin
=
"Web20"
onselectedindexchanged
=
"RadComboBox1_SelectedIndexChanged"
onclientselectedindexchanged
=
"OnClientSelectedIndexChanged"
>
<
Items
>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Line Chart"
Value
=
"LineChart"
/>
<
telerik:RadComboBoxItem
runat
=
"server"
Text
=
"Pie Chart"
Value
=
"PieChart"
/>
</
Items
>
</
telerik:RadComboBox
>
<
table
>
<
tr
>
<
td
class
=
"TimeframeRestricted"
>
Timeframe Restricted:</
td
>
<
td
class
=
"TimeframeCheckbox"
>
<
asp:CheckBox
ID
=
"CheckBox2"
runat
=
"server"
AutoPostBack
=
"True"
oncheckedchanged
=
"CheckBox2_CheckedChanged"
/>
</
td
>
<
td
class
=
"TimeframeDateTimePickers"
>
<
telerik:RadDateTimePicker
ID
=
"RadDateTimePicker1"
Runat
=
"server"
Skin
=
"Web20"
Enabled
=
"False"
Culture
=
"en-US"
EnableTyping
=
"False"
PopupDirection
=
"TopLeft"
>
<
TimeView
runat
=
"server"
CellSpacing
=
"-1"
>
</
TimeView
>
<
TimePopupButton
CssClass
=
"rcTimePopup rcDisabled"
ImageUrl
=
""
HoverImageUrl
=
""
>
</
TimePopupButton
>
<
Calendar
runat
=
"server"
Skin
=
"Web20"
UseColumnHeadersAsSelectors
=
"False"
UseRowHeadersAsSelectors
=
"False"
ViewSelectorText
=
"x"
>
</
Calendar
>
<
DateInput
runat
=
"server"
DateFormat
=
"M/d/yyyy"
DisplayDateFormat
=
"M/d/yyyy"
readonly
=
"True"
>
</
DateInput
>
<
DatePopupButton
CssClass
=
"rcCalPopup rcDisabled"
ImageUrl
=
""
HoverImageUrl
=
""
>
</
DatePopupButton
>
<
ClientEvents
OnPopupClosing
=
"AdjustRadWindow"
OnPopupOpening
=
"AdjustRadWindow"
/>
</
telerik:RadDateTimePicker
>
</
td
>
</
tr
>
<
tr
>
<
td
class
=
"DataPointsShown"
>
<
asp:Label
ID
=
"Label2"
runat
=
"server"
Text
=
"Data Points Shown:"
></
asp:Label
>
</
td
>
<
td
class
=
"DatapointsCheckbox"
>
<
asp:CheckBox
ID
=
"CheckBox3"
runat
=
"server"
AutoPostBack
=
"True"
/>
</
td
>
<
td
class
=
"TimeframeDateTimePickers"
>
<
telerik:RadDateTimePicker
ID
=
"RadDateTimePicker2"
Runat
=
"server"
Skin
=
"Web20"
Enabled
=
"False"
Culture
=
"en-US"
EnableTyping
=
"False"
PopupDirection
=
"TopLeft"
>
<
TimeView
runat
=
"server"
CellSpacing
=
"-1"
>
</
TimeView
>
<
TimePopupButton
CssClass
=
"rcTimePopup rcDisabled"
ImageUrl
=
""
HoverImageUrl
=
""
>
</
TimePopupButton
>
<
Calendar
runat
=
"server"
Skin
=
"Web20"
UseColumnHeadersAsSelectors
=
"False"
UseRowHeadersAsSelectors
=
"False"
ViewSelectorText
=
"x"
>
</
Calendar
>
<
DateInput
runat
=
"server"
DateFormat
=
"M/d/yyyy"
DisplayDateFormat
=
"M/d/yyyy"
readonly
=
"True"
>
</
DateInput
>
<
DatePopupButton
CssClass
=
"rcCalPopup rcDisabled"
ImageUrl
=
""
HoverImageUrl
=
""
>
</
DatePopupButton
>
<
ClientEvents
OnPopupClosing
=
"AdjustRadWindow"
OnPopupOpening
=
"AdjustRadWindow"
/>
</
telerik:RadDateTimePicker
>
</
td
>
</
tr
>
</
table
>
</
fieldset
>
<
div
class
=
"BottomButtons"
>
<
telerik:RadButton
ID
=
"RadButton1"
runat
=
"server"
Skin
=
"Web20"
Text
=
"Apply"
OnClientClicked
=
"CloseAndSave"
>
</
telerik:RadButton
>
</
div
>
</
form
>
</
body
>
</
html
>
In my client-side onLoad function I check the combobox's value, and, if its value is PieChart, I attempt to hide some controls on the page from the user. Setting the checkbox's visibility property to Collapse, Hidden, etc.. doesn't do anything. The same with setting its height and width to 0 -- it is still visible. If I disable it, it becomes disabled. I am able to affect the controls on its left and right -- the RadDateTimePicker and the label both disappear in IE8 perfectly fine.
Any suggestions on how to remove this finicky box would be appreciated.