Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Having trouble disabling a check-box client-side in IE8. Are RadControls interfering?

1 Answer 114 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 29 Mar 2011, 01:07 AM
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:

<%@ 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">
 
<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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Niko
Telerik team
answered on 30 Mar 2011, 11:25 AM
Hi Sean,

The FormDecorator as a control decorates checkboxes by adding additional markup to the page. Being so hiding the decorated elements should also mean hiding this extra markup. Here is what you need to do:
  1. Get the reference to the decorating element - the id of this element is the value of a _rfddecoratedid attribute of the decorated element. This is the way to keep the connection between the two elements:
    var checkbox = $get('<%= CheckBox3.ClientID %>');
    var decoratingCheckbox = $get(checkbox.getAttribute("_rfddecoratedid"));
  2. Here comes the second tricky part. If you try to use display=none you may run into troubles as there is another CSS definition for display marked as !important. Therefore the better option would be to set the visibility to hidden:
    decoratingCheckbox.style.visibility = "hidden";

Hope this will solve your issue with hiding decorated elements.
Kind regards,
Niko
the Telerik team
Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Tags
General Discussions
Asked by
Sean
Top achievements
Rank 2
Answers by
Niko
Telerik team
Share this question
or