Object not required Error with RadAjaxPanel

[John]

Hello,

First of all, here is what I am working with:  ASP.NET project using ASP.NET AJAX Q3 2009 SP2 (I know that this is old, but that is what the project is using and I don't have the ability to change this...).

I have a user control (.ascx) which has several fieldsets in it which each contain pieces of data about a job, i.e. job name and description, job variables, job schedule and job notification settings.  In the job notification section, there are two checkboxes which the user can check to specify whether or not they want to be notified about different events.  If at least one checkbox is selected, I want a panel to appear containing a list of email addresses which will be used for the notifications. 

The previous developer wrote a server side OnCheckChanged event that checks to see if either of the checkboxes are selected and, if they are, it makes the panel visible and makes the panel not visible if they aren't.  This works fine without AJAX, except for the fact that the page has to post back.  I thought that it would be a good candidate to ajaxify this process so that only that small section posts back to the server.

Here's where it gets weird.  I put the section of the page in an RadAjaxPanel and everything was working fine for a couple of days.  Then, yesterday, I started getting a weird javascript error.  The only thing that I can think of that changed was that I rebuilt the project prior to building the installer for the project.  Anyway, I can't figure out why this isn't working.  Here is the section of page with the RadAjaxPanel in it.  I'm including some other parts of the page for context, but the RadAjaxPanel in question has the ID of RadAjaxPanelNotification. 

                    <fieldset>
                        <legend>Scheduling</legend>
                        <asp:ObjectDataSource ID="ListenerList" runat="server" SelectMethod="GetListenersList"
                            TypeName="DIS.Business.BLL.Listeners"></asp:ObjectDataSource>
                        Listener<telerik:RadComboBox ID="Listener" runat="server" DataSourceID="ListenerList"
                            DataTextField="ComputerName" DataValueField="ID" Skin="Web20">
                        </telerik:RadComboBox>
                        <br />
                        <asp:ObjectDataSource ID="FrequencyList" runat="server" SelectMethod="GetSchedulePatternList"
                            TypeName="UtilityClass.Utility"></asp:ObjectDataSource>
                        Frequency<asp:RadioButtonList ID="Frequency" runat="server" DataSourceID="FrequencyList"
                            RepeatLayout="Flow" RepeatDirection="Horizontal" OnSelectedIndexChanged="Frequency_SelectedIndexChanged"
                            AutoPostBack="True" OnDataBound="Frequency_DataBound">
                        </asp:RadioButtonList>
                        <br />

                        <asp:CompareValidator ID="FromAndToComparValidator" runat="server"
                            ErrorMessage="To Date Must be Later than From Date" ControlToValidate="ToTime"
                            ControlToCompare="FromTime" Operator="GreaterThan"></asp:CompareValidator><br />
                        From<span class="required">*</span> <telerik:RadDateTimePicker ID="FromTime" runat="server" MinDate="2000-01-01"
                            Skin="Web20">
                            <TimePopupButton HoverImageUrl="" ImageUrl="" />
                            <TimeView CellSpacing="-1">
                            </TimeView>
                            <Calendar Skin="Web20" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                                ViewSelectorText="x">
                            </Calendar>
                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                        </telerik:RadDateTimePicker>
                        <asp:RequiredFieldValidator ID="FromTimeValidator" runat="server" ErrorMessage="Date Required" ControlToValidate="FromTime"></asp:RequiredFieldValidator><br />
                        To<span class="required">*</span>     <telerik:RadDateTimePicker ID="ToTime" runat="server" Skin="Web20">
                            <TimePopupButton HoverImageUrl="" ImageUrl="" />
                            <TimeView CellSpacing="-1">
                            </TimeView>
                            <Calendar Skin="Web20" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False"
                                ViewSelectorText="x">
                            </Calendar>
                            <DatePopupButton HoverImageUrl="" ImageUrl="" />
                        </telerik:RadDateTimePicker>
                        <asp:RequiredFieldValidator ID="ToTimeValidator" runat="server" ErrorMessage="Date Required" ControlToValidate="ToTime"></asp:RequiredFieldValidator>
                        <br />
                        <asp:ObjectDataSource ID="WeekdayList" runat="server" SelectMethod="GetWeekDayList"
                            TypeName="DIS.Business.BLL.WeekDays"></asp:ObjectDataSource>
                        <asp:Label ID="lblEvery" runat="server" Text="Every"></asp:Label>
                        <asp:TextBox ID="MinuteInterval" runat="server" MaxLength="5"></asp:TextBox><asp:Label
                            ID="lblMinutes" runat="server" Text="Minutes"></asp:Label>
                        <asp:CheckBoxList ID="Weekday" runat="server" DataSourceID="WeekdayList" RepeatDirection="Horizontal"
                            RepeatLayout="Flow" Visible="False">
                        </asp:CheckBoxList>
                    </fieldset>
                <br />
                <telerik:RadAjaxPanel ID="RadAjaxPanelNotification" runat="server"
                    LoadingPanelID="RadAjaxLoadingPanel1" HorizontalAlign="NotSet">
                    <fieldset>
                        <legend>Notification</legend>
                        <asp:CheckBox ID="SendSuccessful" runat="server" Text="Send notification if successful."
                            OnCheckedChanged="NotificationChanged" AutoPostBack="True" />
                        <asp:CheckBox ID="SendFailed" runat="server" Text="Send notification if failed."
                            OnCheckedChanged="NotificationChanged" AutoPostBack="True" /><br />
                        <asp:Panel ID="PanelEmailDetail" runat="server" Visible="False">
                            New Email<br />
                            <asp:TextBox ID="NewEmail" runat="server" MaxLength="128"></asp:TextBox><asp:Button
                                ID="AddEmail" runat="server" Text="Add Email" OnClick="AddEmail_Click" /><br />
                            <asp:ListBox ID="EmailList" runat="server" SelectionMode="Multiple" Rows="5"></asp:ListBox>
                            <asp:Button ID="RemoveEmail" runat="server" Text="Remove Email"
                                OnClick="RemoveEmail_Click" style="width: 125px" /><br />
                        </asp:Panel>
                    </fieldset>
                </telerik:RadAjaxPanel>
                <asp:Button ID="Save" runat="server" Text="Save" OnClick="Save_Click" />
                <asp:Button ID="BtAssignedUsers" runat="server" Font-Bold="True"
                     Text="Assigned Users" />
                <telerik:RadInputManager ID="RadInputManager1" runat="server"
                    OnInit="RadInputManager1_Init" Skin="Web20">
                    <telerik:TextBoxSetting BehaviorID="Behavior1">
                        <TargetControls>
                            <telerik:TargetInput ControlID="JobName" />
                            <telerik:TargetInput ControlID="Description" />
                        </TargetControls>
                        <Validation IsRequired="true" ValidationGroup="JobScheduling_1" />
                    </telerik:TextBoxSetting>
                    <telerik:RegExpTextBoxSetting BehaviorID="Behavior2"
                        ErrorMessage="Invalid Email"
                        ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
                        <TargetControls>
                            <telerik:TargetInput ControlID="NewEmail" />
                        </TargetControls>
                        <Validation IsRequired="true" ValidationGroup="JobScheduling_1_Email" />
                    </telerik:RegExpTextBoxSetting>
                    <telerik:NumericTextBoxSetting BehaviorID="Behavior3"
                        Culture="English (United States)" DecimalDigits="0" DecimalSeparator="."
                        GroupSeparator="," GroupSizes="3" MaxValue="10000" MinValue="0"
                        NegativePattern="-n" PositivePattern="n">
                        <TargetControls>
                            <telerik:TargetInput ControlID="MinuteInterval" />
                        </TargetControls>
                    </telerik:NumericTextBoxSetting>
                </telerik:RadInputManager>
        </td>
    </tr>
</table>

Here is the code behind for the event:

protected void NotificationChanged(object sender, EventArgs e)
{
    ChangeNotificationUI();
}

private void ChangeNotificationUI()
{
    bool blnDisplayNotificationList = this.SendSuccessful.Check || this.SendFailed.Checked;
    this.PanelEmailDetail.Visible = blnDisplayNotificationList;
}

Ajax works when the either of the buttons are checked or unchecked and the panel is visible; I see the loading panel appear and then disappear after the server side processing.  It also works when both buttons are unchecked; the loading panel appears and as soon as the server side processing is done, the panel is set to not visible.  The thing that has started happening is when the panel is set to not visible and a check box is checked, instead of the loading panel, I get a webpage error which says "Error: Object required."  If I use the IE script debugger, the line that is failing has "if (typeof(b) =="undefined") {c=a.value;" and the error message says something like:  "Object required: Telerik.Web.UI.WebResource.axd? TSM HiddenField =RadScriptManager1 TSM&compress=1& ..."  I am attaching a screenshot with more information.

We're pretty stumped on this.  First of all, we can't figure out why this was working and now, all of a sudden, we're getting this error.  Something must have changed but we don't know what.  Second, this doesn't look like something which is all that complicated and should be easily handled by a RadAjaxPanel.  When we take the RadAjaxPanel out, this works fine but it just posts back to the server, which is what we'd like to avoid.  Does anybody have any suggestions as to what might be going wrong?

Regards,
John

[Marin]

Hello John,

The reason for this error comes from the RadInputManager that on postback tries to find the text boxes that are inside the AjaxPanel, but fails because they are not rendered yet.
The workaround is to put the RadInputManager in the RadAjaxPanel as well so that it can find the text boxes.

<telerik:RadAjaxPanel EnableAJAX="true" ID="RadAjaxPanelNotification" runat="server"
            LoadingPanelID="RadAjaxLoadingPanel1" HorizontalAlign="NotSet">
            <fieldset>
                <legend>Notification</legend>
                <asp:CheckBox ID="SendSuccessful" runat="server" Text="Send notification if successful."
                    OnCheckedChanged="NotificationChanged" AutoPostBack="True" />
                <asp:CheckBox ID="SendFailed" runat="server" Text="Send notification if failed."
                    OnCheckedChanged="NotificationChanged" AutoPostBack="True" /><br />
                <asp:Panel ID="PanelEmailDetail" runat="server" Visible="False">
                    New Email<br />
                    <asp:TextBox ID="NewEmail" runat="server" MaxLength="128"></asp:TextBox><asp:Button
                        ID="AddEmail" runat="server" Text="Add Email" OnClick="AddEmail_Click" /><br />
                    <asp:ListBox ID="EmailList" runat="server" SelectionMode="Multiple" Rows="5"></asp:ListBox>
                    <asp:Button ID="RemoveEmail" runat="server" Text="Remove Email" OnClick="RemoveEmail_Click"
                        Style="width: 125px" /><br />
                </asp:Panel>
            </fieldset>
          <telerik:RadInputManager ID="RadInputManager1" runat="server" OnInit="RadInputManager1_Init"
            Skin="Web20">
            <telerik:TextBoxSetting BehaviorID="Behavior1">
                <TargetControls>
                    <telerik:TargetInput ControlID="JobName" />
                    <telerik:TargetInput ControlID="Description" />
                </TargetControls>
                <Validation IsRequired="true" ValidationGroup="JobScheduling_1" />
            </telerik:TextBoxSetting>
            <telerik:RegExpTextBoxSetting BehaviorID="Behavior2" ErrorMessage="Invalid Email"
                ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
                <TargetControls>
                    <telerik:TargetInput ControlID="NewEmail" />
                </TargetControls>
                <Validation IsRequired="true" ValidationGroup="JobScheduling_1_Email" />
            </telerik:RegExpTextBoxSetting>
            <telerik:NumericTextBoxSetting BehaviorID="Behavior3" Culture="English (United States)"
                DecimalDigits="0" DecimalSeparator="." GroupSeparator="," GroupSizes="3" MaxValue="10000"
                MinValue="0" NegativePattern="-n" PositivePattern="n">
                <TargetControls>
                    <telerik:TargetInput ControlID="MinuteInterval" />
                </TargetControls>
            </telerik:NumericTextBoxSetting>
        </telerik:RadInputManager>
        </telerik:RadAjaxPanel>
          <asp:Button ID="Save" runat="server" Text="Save" OnClick="Save_Click" />
        <asp:Button ID="BtAssignedUsers" runat="server" Font-Bold="True" Text="Assigned Users" />

Hope this helps.

All the best,
Marin
the Telerik team

[John]

Marin,

Thank you very much for your response.  That makes perfect sense.  I'm new to Telerik and I'm trying to plow through the documentation, but I hadn't considered that. 

I have a follow-up question that I hope you'll be able to clarify for me.  On that page, there are two sections which we would like to ajaxify.  The first is the email notification section which I wrote about and that the second section is a scheduling section for which I believe I also included the code.  I would like both to be in their own RadAjaxPanel.  The RadInputManager, though, controls elements from both sections.  If I put the RadInputManager inside of one RadAjaxPanel, that will probably cause problems when the second RadAjaxPanel posts back, correct? 

Is this the situation where we would use a RadAjaxManager to control exactly which controls get ajaxified on the page? 

Thanks for your help,
John

[Marin]

Hello John,

Putting the RadInputManager in the same RadAjaxPanel as the controls it extends is not a necessary requirement at all. It was a simple workaround in this concrete scenario where we have checkboxes that show and hide the controls it extends and non-ajaxified buttons (the Save and the Assign users button) that make standard postback. There is no problem in extending other elements with the RadInputManager (regardless of which RadAjaxPanel they are in) as long as you are not dynamically hiding and showing them on the page.

You are right that RadAjaxManager is also an option here, since it allows much more control on the source and the target of the ajax callback, regardless of the position of the controls on the page. That is why it is suitable for more complex scenario where more control is needed.

Regards,
Marin
the Telerik team