This is a migrated thread and some comments may be shown as answers.

RadAjaxManagerProxy : partial postback does not work

9 Answers 154 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Jita asked on 15 Oct 2015, 01:34 PM

The page still does full postback not partial post back on the project details panel, when I select drop drown list. How should I fix it?

CODE # 1

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ddlSelectProject">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="divProjectInfo" LoadingPanelID="PanelProjects" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>

CODE # 2

<table style="height: 350px;">
<tr><telerik:RadAjaxLoadingPanel ID="PanelProjects" runat="server">

</tr>

</tbody>

</table>

</td>

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxLoadingPanel ID="PanelFile" runat="server">

</telerik:RadAjaxLoadingPanel>

</tr>

</table>

9 Answers, 1 is accepted

answered on 19 Oct 2015, 02:13 PM

Hi Jita,

Based on the provided information it would be hard to pinpoint the exact cause of the issue. Most likely the AjaxSettings are not configured correctly. However, in order to give more to-the-point information we need to examine the code.

Would you share the complete markup of the page with the related code-behind? Also, please describe your setup in more detail. Are the Ajax-enabled controls on the same page? Or some are in a UserControl/ContentPage?

Regards,
Viktor Tachev
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 19 Oct 2015, 08:36 PM

<div style="margin-top:5px;padding-top:10px;">
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ddlTBSelectProject">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="divProjectInfo" LoadingPanelID="PanelProjects" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>



<table style="height: 350px;">
<tr>
<telerik:RadAjaxLoadingPanel ID="PanelProjects" runat="server">
<td id="tdProjectDetails" style="border-right:1px solid gray; width:20%; padding-left:50px; padding-right:60px;">
<table>
<tbody>
<tr>
<td colspan="2" style="padding-left: 10px; vertical-align: top;" class="DescriptionLabel">Project Details</td>
</tr>
<tr style="height:20px;"></tr>
<tr>
<td style="padding-left: 10px;width:36%;">
Associated Project
</td>
<td>
<asp:DropDownList ID="ddlTBSelectProject" OnSelectedIndexChanged="ddlTBSelectProject_SelectedIndexChanged" runat="server" AutoPostBack="true" Width="100%">
</asp:DropDownList>
</td>
</tr>
<tr style="height:15px;"></tr>
<tr>
<td colspan="2">
<div id="divProjectInfo" runat="server">
<table style="width:100%">
<tbody>
<tr>
<td class="leftCell">Owner:
</td>
<td class="rightCell">
<span id="lblOwner" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Start Date:
</td>
<td class="rightCell">
<span id="lblStartDate" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Due Date:
</td>
<td class="rightCell">
<span id="lblDueDate" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Status:
</td>
<td class="rightCell">
<span id="lblStatus" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Priority:
</td>
<td class="rightCell">
<span id="lblPriority" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Description:
</td>
<td class="rightCell">
<label id="taDescription" runat="server" aria-multiline="true"></label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr style="height:15px;"></tr>
</tbody>
</table>
</td>
</telerik:RadAjaxLoadingPanel>

<%-- <telerik:RadAjaxLoadingPanel ID="pnlUpload" runat="server">--%>
<td id="tdFileUpload" style="width:40%; padding-left:40px; padding-right:60px;vertical-align: top;">
<table>

<tbody>
<tr style="">
<td colspan="2" style="padding-left: 10px; vertical-align: middle;" class="DescriptionLabel">Upload File</td>
</tr>
<tr style="height:10px;"></tr>
<tr>
<td>
<div id="divReloadFile" runat="server" visible="false">
<span ID="spnFileName" runat="server"></span>
<input id="btnRemoveReloadedFile" type="button" runat="server" alue="Remove" onclick="btnRemoveReloadedFileClick();" >
</div>
</td>
</tr>
<tr id="trfileupload" runat="server">
<td>
<telerik:RadAsyncUpload ID="RadAsyncFileUpload" runat="server" MaxFileSize="2097152" AllowedFileExtensions="xls,xlsx,csv" Localization-Select="Upload" MaxFileInputsCount="1"></telerik:RadAsyncUpload>
<asp:Button ID="btnsubmitupload" runat="server" Visible="false" />
</td>
</tr>
<tr id="trfileuploadinfo" runat="server">
<td>
<span>( Upload XLSX or CSV files. )</span>
</td>
</tr>
<tr style="display:none;">
<td>
<div id="Uploader" class="Uploader" onclick="TriggerFileClick()">
<input id="FileUpload" style="visibility:hidden; position: fixed; top: -100px" type="file" name="files[]" multiple accept=".csv,.xls,.xlsx">
<span id="fileSelected" class="Uploadertxt" >Click or drag to <br />
upload XLSX or <br />
CSV files</span>
</div>
</td>
</tr>
<tr style="height:20px;"></tr>
<tr>
<td>
<table id="tblFileUploaded" style="background-color:lightgray; display:none;">
<tr>
<td>
<span id="filename" style=""></span>
</td>
<td>
<span id="removeFile" onclick="removeFiles();" style="cursor:pointer; display:none;">
<img class="manImg" src="images/cancel_box_button.png"/>
</span>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<%-- </telerik:RadAjaxLoadingPanel>--%>
</tr>
</table>
<asp:HiddenField id="hdn_enableNext" runat="server" Value="0"/>
</div>

answered on 21 Oct 2015, 09:11 AM

Hello Jita,

I have examined the provided code and noticed that the controls are placed inside RadAjaxLoadingPanel. Note that this is not a valid scenario. The idea of the RadAjaxLoadingPanel control is to be displayed over the updated control.

Try to modify the code like below and see how the behavior changes.

<div style="margin-top: 5px; padding-top: 10px;">

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ddlTBSelectProject">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="divProjectInfo" LoadingPanelID="PanelProjects" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<table style="height: 350px;">

<tr>

<telerik:RadAjaxLoadingPanel ID="PanelProjects" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<td id="tdProjectDetails" style="border-right: 1px solid gray; width: 20%; padding-left: 50px; padding-right: 60px;">

<table>

<tbody>

<tr>

<td colspan="2" style="padding-left: 10px; vertical-align: top;" class="DescriptionLabel">Project Details</td>

</tr>

<tr style="height: 20px;"></tr>

<tr>

<td style="padding-left: 10px; width: 36%;">Associated Project

</td>

<td>

<asp:DropDownList ID="ddlTBSelectProject" OnSelectedIndexChanged="ddlTBSelectProject_SelectedIndexChanged" runat="server" AutoPostBack="true" Width="100%">

</asp:DropDownList>

</td>

</tr>

<tr style="height: 15px;"></tr>

<tr>

<td colspan="2">

<div id="divProjectInfo" runat="server">

<table style="width: 100%">

<tbody>

<tr>

<td class="leftCell">Owner:

</td>

<td class="rightCell">

<span id="lblOwner" runat="server">--</span>

</td>

</tr>

<tr>

<td class="leftCell">Start Date:

</td>

<td class="rightCell">

<span id="lblStartDate" runat="server">--</span>

</td>

</tr>

<tr>

<td class="leftCell">Due Date:

</td>

<td class="rightCell">

<span id="lblDueDate" runat="server">--</span>

</td>

</tr>

<tr>

<td class="leftCell">Status:

</td>

<td class="rightCell">

<span id="lblStatus" runat="server">--</span>

</td>

</tr>

<tr>

<td class="leftCell">Priority:

</td>

<td class="rightCell">

<span id="lblPriority" runat="server">--</span>

</td>

</tr>

<tr>

<td class="leftCell">Description:

</td>

<td class="rightCell">

<label id="taDescription" runat="server" aria-multiline="true"></label>

</td>

</tr>

</tbody>

</table>

</div>

</td>

</tr>

<tr style="height: 15px;"></tr>

</tbody>

</table>

</td>

<%-- <telerik:RadAjaxLoadingPanel ID="pnlUpload" runat="server">--%>

<td id="tdFileUpload" style="width: 40%; padding-left: 40px; padding-right: 60px; vertical-align: top;">

<table>

<tbody>

<tr style="">

<td colspan="2" style="padding-left: 10px; vertical-align: middle;" class="DescriptionLabel">Upload File</td>

</tr>

<tr style="height: 10px;"></tr>

<tr>

<td>

<div id="divReloadFile" runat="server" visible="false">

<span id="spnFileName" runat="server"></span>

<input id="btnRemoveReloadedFile" type="button" runat="server" alue="Remove" onclick="btnRemoveReloadedFileClick();">

</div>

</td>

</tr>

<tr id="trfileupload" runat="server">

<td>

<telerik:RadAsyncUpload ID="RadAsyncFileUpload" runat="server" MaxFileSize="2097152" AllowedFileExtensions="xls,xlsx,csv" Localization-Select="Upload" MaxFileInputsCount="1"></telerik:RadAsyncUpload>

<asp:Button ID="btnsubmitupload" runat="server" Visible="false" />

</td>

</tr>

<tr id="trfileuploadinfo" runat="server">

<td>

<span>( Upload XLSX or CSV files. )</span>

</td>

</tr>

<tr style="display: none;">

<td>

<div id="Uploader" class="Uploader" onclick="TriggerFileClick()">

<input id="FileUpload" style="visibility: hidden; position: fixed; top: -100px" type="file" name="files[]" multiple accept=".csv,.xls,.xlsx">

<span id="fileSelected" class="Uploadertxt">Click or drag to

<br />

upload XLSX or

<br />

CSV files</span>

</div>

</td>

</tr>

<tr style="height: 20px;"></tr>

<tr>

<td>

<table id="tblFileUploaded" style="background-color: lightgray; display: none;">

<tr>

<td>

<span id="filename" style=""></span>

</td>

<td>

<span id="removeFile" onclick="removeFiles();" style="cursor: pointer; display: none;">

<img class="manImg" src="images/cancel_box_button.png" />

</span>

</td>

</tr>

</table>

</td>

</tr>

</tbody>

</table>

</td>

<%-- </telerik:RadAjaxLoadingPanel>--%>

</tr>

</table>

<asp:HiddenField ID="hdn_enableNext" runat="server" Value="0" />

</div>

Regards,
Viktor Tachev
Telerik

answered on 21 Oct 2015, 01:42 PM

Did what you suggested but it still did not solve the issue, even now, if I upload a file, then change dropdown the file uploader is being cleared.

So my expected scenario is when I change the dropdown selection, the RadAsyncFileUpload should still retain its state and file uploaded

I tried both of the following:

1. putting loading panel just before the "tdProjectDetails" td tag.

2. putting loading panel in both places, before the "projectDetails" td tag and before "tdFileUpload" td tag

Here is the following (what I changed)

<div style="margin-top:5px;padding-top:10px;">
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ddlTBSelectProject">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="divProjectInfo" LoadingPanelID="PanelProjects" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>



<table style="height: 350px;">
<tr>
<telerik:RadAjaxLoadingPanel ID="PanelProjects" runat="server">
</telerik:RadAjaxLoadingPanel>
<td id="tdProjectDetails" style="border-right:1px solid gray; width:20%; padding-left:50px; padding-right:60px;">
<table>
<tbody>
<tr>
<td colspan="2" style="padding-left: 10px; vertical-align: top;" class="DescriptionLabel">Project Details</td>
</tr>
<tr style="height:20px;"></tr>
<tr>
<td style="padding-left: 10px;width:36%;">
Associated Project
</td>
<td>
<asp:DropDownList ID="ddlTBSelectProject" OnSelectedIndexChanged="ddlTBSelectProject_SelectedIndexChanged" runat="server" AutoPostBack="true" Width="100%">
</asp:DropDownList>
</td>
</tr>
<tr style="height:15px;"></tr>
<tr>
<td colspan="2">
<div id="divProjectInfo" runat="server">
<table style="width:100%">
<tbody>
<tr>
<td class="leftCell">Owner:
</td>
<td class="rightCell">
<span id="lblOwner" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Start Date:
</td>
<td class="rightCell">
<span id="lblStartDate" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Due Date:
</td>
<td class="rightCell">
<span id="lblDueDate" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Status:
</td>
<td class="rightCell">
<span id="lblStatus" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Priority:
</td>
<td class="rightCell">
<span id="lblPriority" runat="server">--</span>
</td>
</tr>
<tr>
<td class="leftCell">Description:
</td>
<td class="rightCell">
<label id="taDescription" runat="server" aria-multiline="true"></label>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr style="height:15px;"></tr>
</tbody>
</table>
</td>


<telerik:RadAjaxLoadingPanel ID="pnlUpload" runat="server">
</telerik:RadAjaxLoadingPanel>
<td id="tdFileUpload" style="width:40%; padding-left:40px; padding-right:60px;vertical-align: top;">
<table>

<tbody>
<tr style="">
<td colspan="2" style="padding-left: 10px; vertical-align: middle;" class="DescriptionLabel">Upload File</td>
</tr>
<tr style="height:10px;"></tr>
<tr>
<td>
<div id="divReloadFile" runat="server" visible="false">
<span ID="spnFileName" runat="server"></span>
<input id="btnRemoveReloadedFile" type="button" runat="server" alue="Remove" onclick="btnRemoveReloadedFileClick();" >
</div>
</td>
</tr>
<tr id="trfileupload" runat="server">
<td>
<telerik:RadAsyncUpload ID="RadAsyncFileUpload" runat="server" MaxFileSize="2097152" AllowedFileExtensions="xls,xlsx,csv" Localization-Select="Upload" MaxFileInputsCount="1"></telerik:RadAsyncUpload>
<asp:Button ID="btnsubmitupload" runat="server" Visible="false" />
</td>
</tr>
<tr id="trfileuploadinfo" runat="server">
<td>
<span>( Upload XLSX or CSV files. )</span>
</td>
</tr>
<tr style="display:none;">
<td>
<div id="Uploader" class="Uploader" onclick="TriggerFileClick()">
<input id="FileUpload" style="visibility:hidden; position: fixed; top: -100px" type="file" name="files[]" multiple accept=".csv,.xls,.xlsx">
<span id="fileSelected" class="Uploadertxt" >Click or drag to <br />
upload XLSX or <br />
CSV files</span>
</div>
</td>
</tr>
<tr style="height:20px;"></tr>
<tr>
<td>
<table id="tblFileUploaded" style="background-color:lightgray; display:none;">
<tr>
<td>
<span id="filename" style=""></span>
</td>
<td>
<span id="removeFile" onclick="removeFiles();" style="cursor:pointer; display:none;">
<img class="manImg" src="images/cancel_box_button.png"/>
</span>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<%-- --%>
</tr>
</table>
<asp:HiddenField id="hdn_enableNext" runat="server" Value="0"/>
</div>

answered on 26 Oct 2015, 01:32 PM

temp.jpg

Have tried that too.. Can you please tell me how to assign this "PostBack trigger" control from back end.

If you see the attached picture, the Orange outline is my page, and the blue outlined area sitting on that page (which also contains the dropdownlist and the file upload control) is a user control. If possible I would like to set the PostBackTriggering control to be the Green outlined NEXT button.

But not sure how/where to set PostbackTriggers to be a control of the base page.

Another issue I had while I tried that is, when I do a dropdownlist selection the page needs to post back to fill the project details part. if I add the PostbackTriggers=next button only, selecting ddl was not doing anything to fill up the project details part.

Any suggestion on that?

answered on 29 Oct 2015, 09:34 AM

Hello,

In order to set the PostBackTriggers property programmatically you can use the Page_Load event handler of the page:

protected void Page_Load(object sender, EventArgs e)

{

RadAsyncUpload1.PostbackTriggers = new string[] {"RadButton1"};

}

The dropdown issue you describe seems strange. If the dropdown control is configured correctly the additional data should be fixed on postback.

If you have AJAX enabled, try to disable it by setting the EnableAjax property of RadAjaxManager to false and see how the behavior changes. If the functionality works with AJAX disabled this means that the AjaxSettings for the dropdown are not set correctly.

Regards,
Viktor Tachev
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadAjaxManagerProxy : partial postback does not work

9 Answers, 1 is accepted