Iv'e seen examples of the telerik:AjaxSetting and telerik:RadAjaxLoadingPanel so I thought I would try it out in stead of using the standard Ajax update panel.
For the most part it works ok, even mixing it up with standard Ajax like collapse panels. I came across an issue where setting up a Control to be updated by its own onTextChanged Event, I got a funky java script error. It doess't prevent the control form being updated it just throws an exception.
here is the tag in question:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="TextBox_capacity">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TextBox_capacity" />
</UpdatedControls>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" /> </telerik:AjaxSetting>
I have others of course but this one throws the exception. Not Sure why. It works just fine once you click past the exception.
Line: 157
Error: Sys.ArgumentNullException: Value cannot be null.
Parameter name: panelsCreated[12]
And when I debug:
$type.registerClass('Sys.WebForms.InitializeRequestEventArgs', Sys.CancelEventArgs);
$type = Sys.WebForms.PageLoadedEventArgs = function PageLoadedEventArgs(panelsUpdated, panelsCreated, dataItems) {
/// <summary locid="M:J#Sys.WebForms.PageLoadedEventArgs.#ctor">The arguments for the PageRequestManager's pageLoaded event. The pageLoaded event is raised after the DOM has been updated.</summary>
/// <param name="panelsUpdated" type="Array">An array of UpdatePanels that were updated.</param>
/// <param name="panelsCreated" type="Array">An array of UpdatePanels that were created.</param>
/// <param name="dataItems" type="Object" mayBeNull="true"></param>
var e = Function._validateParams(arguments, [
{name: "panelsUpdated", type: Array},
{name: "panelsCreated", type: Array},
{name: "dataItems", type: Object, mayBeNull: true}
]);
if (e) throw e;
Sys.WebForms.PageLoadedEventArgs.initializeBase(this);
this._panelsUpdated = panelsUpdated;
this._panelsCreated = panelsCreated;
this._dataItems = dataItems || new Object();
}
I'm sure I'm missing something simple...........
1 Answer, 1 is accepted
Rank 1
See what happens is the parent control visibility was conditionalized, a table, then inside the table a collapse panel, then inside that the gontrol(s). If the parent, and Grand parent element don't exist on the client then the ajax obviously can't find the control to Ajaxify.
So instead of making the parent and grand parent controls visible based on a certain condition, I allow all the elements to be visible and programmmatically disable the collapse panel untill needed. like so: CollapsiblePanelExtender1.Enabled = false;
<table id="TableServiceDetails" runat="server" class="tcTable4" visible="true">
<tr>
<th>
<asp:Panel ID="pHeader" runat="server">
<img src="../../App_Themes/tcStyle/image/space.gif" id="Image1" />
<asp:Label ID="lblText" runat="server" CssClass="lblOne" />
<asp:Label ID="lbl_service_details_id" runat="server" />
</asp:Panel>
</th>
</tr>
<tr>
<td>
<asp:Panel ID="pBody" runat="server" CssClass="cpBody">
<table id="tblServDtl" runat="server" class="tcTable3">
<tr>
<th colspan="2">
<asp:Label ID="lbl_equip_number" runat="server" Text="Equipment #" />
</th>
<th colspan="2">
<asp:Label ID="lbl_capacity" runat="server" Text="Capacity" />
</th>
<th colspan="2">
<asp:Label ID="lbl_initial_load_test" runat="server" Text="Initial Load Test" />
</th>
<th colspan="2">
<asp:Label ID="lbl_reload_test" runat="server" Text="Reload Test" />
</th>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox_equip_number" runat="server" Text="" class="tenEm"></asp:TextBox>
</td>
<td>
</td>
<td>
<asp:TextBox ID="TextBox_capacity" runat="server" AutoPostBack="true" OnTextChanged="onlyNumeric_TextChanged"
Text="" class="tenEm"></asp:TextBox>
</td>
<td>
<telerik:RadComboBox ID="rbcUnit1" runat="server" CssClass="fleft" />
</td>
<td>
<asp:TextBox ID="TextBox_initial_load_test" runat="server" Text="" class="tenEm" AutoPostBack="true" OnTextChanged="onlyNumeric_TextChanged" ></asp:TextBox>
</td>
<td>
<telerik:RadComboBox ID="rbcUnit2" runat="server" CssClass="fleft" />
</td>
<td>
<asp:TextBox ID="TextBox_reload_test" runat="server" Text="" class="tenEm" AutoPostBack="true" OnTextChanged="onlyNumeric_TextChanged" ></asp:TextBox>
</td>
<td>
<telerik:RadComboBox ID="rbcUnit3" runat="server" CssClass="fleft" />
</td>
</tr>
<tr>
<th colspan="2">
<asp:Label ID="lbl_throat_1" runat="server" Text="Throat 1" />
</th>
<th colspan="2">
<asp:Label ID="lbl_throat_2" runat="server" Text="Throat 2" />
</th>
<th colspan="2">
<asp:Label ID="lbl_bowl_1" runat="server" Text="Bowl 1" />
</th>
<th colspan="2">
<asp:Label ID="lbl_bowl_2" runat="server" Text="Bowl 2" />
</th>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox_throat_1" runat="server" Text="" class="tenEm" AutoPostBack="true" OnTextChanged="onlyNumeric_TextChanged" ></asp:TextBox>
</td>
<td>
<telerik:RadComboBox ID="rcbUnit4" runat="server" CssClass="fleft" />
</td>
<td>
<asp:TextBox ID="TextBox_throat_2" runat="server" Text="" class="tenEm" AutoPostBack="true" OnTextChanged="onlyNumeric_TextChanged" ></asp:TextBox>
</td>
<td>
<telerik:RadComboBox ID="rcbUnit5" runat="server" CssClass="fleft" />
</td>
<td>
<asp:TextBox ID="TextBox_bowl_1" runat="server" Text="" class="tenEm" AutoPostBack="true" OnTextChanged="onlyNumeric_TextChanged" ></asp:TextBox>
</td>
<td>
<telerik:RadComboBox ID="rcbUnit6" runat="server" CssClass="fleft" />
</td>
<td>
<asp:TextBox ID="TextBox_bowl_2" runat="server" Text="" class="tenEm" AutoPostBack="true" OnTextChanged="onlyNumeric_TextChanged" ></asp:TextBox>
</td>
<td>
<telerik:RadComboBox ID="rcbUnit7" runat="server" CssClass="fleft" />
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" TargetControlID="pBody"
CollapseControlID="pHeader" ExpandControlID="pHeader" Collapsed="true" TextLabelID="lblText"
CollapsedText="Click to Show Content.. " ExpandedText="Click to Hide Content.. "
ImageControlID="Image1" ExpandedImage="../../App_Themes/tcStyle/image/expand.jpg"
CollapsedImage="../../App_Themes/tcStyle/image/collapse.jpg" CollapsedSize="0">
</asp:CollapsiblePanelExtender>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="TextBox_capacity" >
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TextBox_capacity" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="TextBox_initial_load_test" >
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TextBox_initial_load_test" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="TextBox_reload_test" >
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TextBox_reload_test" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="TextBox_throat_1" >
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TextBox_throat_1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="TextBox_throat_2" >
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TextBox_throat_2" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="TextBox_bowl_1" >
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TextBox_bowl_1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="TextBox_bowl_2" >
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TextBox_bowl_2" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />