|
Article relates to
|
RadAjax and RadRadMenu, RadPanelBar, RadTabStrip, RadToolBar or RadTreeView for ASP.NET AJAX
|
|
Created by
|
Peter, Telerik
|
|
Last modified by
|
Simon, Telerik
|
DESCRIPTION
There are cases when you need to perform a real postback for specific items in an AJAX-ified control. Especifically when you want to upload or download files as a result of user interaction with an AJAX-ified control, you should disable AJAX since upload/download of files cannot happen during AJAX.
For instance, suppose that you integrate RadTooolbar with
RadUpload and you have a toolbar button which will trigger the upload process. At the same time you want the other toolbar buttons to perform AJAX callback.
The sample code shows a ToolBar with three buttons and handled
OnButtonClick server side event. The button with value="posback" performs a real postback, while the other items perform an AJAX callback.
The approach from this article can be applied to all navigation controls (RadMenu, RadPanelbar, RadTabStrip, RadTreeView and RadToolBar) and all RadAjax controls (RadAjaxPanel, RadAjaxManager). The sample code in the
SOLUTION part uses RadToolbar.
SOLUTION
The main idea behind this approach is to hook to an event which occurs before the
OnRequestStart of RadAjax and to set a
cancelAjax flag. We use the
OnClientButtonClicking event of RadToolbar. The RadToolbar Items are differentiated by their value property on the client.
Note: In case of a file download the
cancelAjax flag should be reset immediately after AJAX is canceled. This is required because when the file is sent to the client, the page will remain in the same state, although a postback occurs.
| <form id="form1" runat="server"> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| |
| <script type="text/javascript"> |
| var cancelAjax = false; |
| |
| function clientButtonClicking(sender, eventArgs) { |
| if (eventArgs.get_item().get_value() == "postback") { |
| cancelAjax = true; |
| } |
| } |
| |
| function onRequestStart(sender, eventArgs) |
| { |
| if((eventArgs.get_eventTarget() == "RadToolBar1") && |
| (cancelAjax)) { |
| eventArgs.set_enableAjax(false); |
| } |
| |
| //Uncomment the line below in case of a file download. |
| //cancelAjax = false; |
| } |
| </script> |
| |
| <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" |
| ClientEvents-OnRequestStart="onRequestStart"> |
| <telerik:RadToolBar ID="RadToolBar1" runat="server" |
| OnClientButtonClicking="clientButtonClicking" |
| OnButtonClick="RadToolBar1_ButtonClick"> |
| <Items> |
| <telerik:RadToolBarButton runat="server" |
| Value="ajax" Text="Button 0"> |
| </telerik:RadToolBarButton> |
| <telerik:RadToolBarButton runat="server" |
| Value="postback" Text="RealPostBack 1"> |
| </telerik:RadToolBarButton> |
| <telerik:RadToolBarButton runat="server" |
| Value="ajax" Text="Button 2"> |
| </telerik:RadToolBarButton> |
| </Items> |
| </telerik:RadToolBar> |
| </telerik:RadAjaxPanel> |
| </form> |
Please
Sign In
to rate this article.