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

Exclude Toolbar button from Ajax Update

4 Answers 154 Views

ToolBar

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

Albert Shenker asked on 31 Aug 2009, 06:33 PM

I have a toolbar in a user control which is ajaxified using the following declaration:

    
            <telerik:RadAjaxManagerProxy ID="rap1" runat="server" > 
        
                <AjaxSettings> 
        
                    <telerik:AjaxSetting AjaxControlID="rtbActions">  
        
                        <UpdatedControls> 
        
                            <telerik:AjaxUpdatedControl ControlID="pnlFFV" LoadingPanelID="lpFFV" /> 
        
                            <telerik:AjaxUpdatedControl ControlID="rtbActions" /> 
        
                        </UpdatedControls> 
        
                    </telerik:AjaxSetting> 
        
                </AjaxSettings> 
        
            </telerik:RadAjaxManagerProxy>

When certain toolbar buttons are clicked, controls are updated within a panel control (pnlFFV), and sometimes the toolbar itself is updated. This all works well, however, there is a button in the toolbar, which I want to cause a postback instead of an ajax update (this button is used to download a file and it is necessay to use the reponse object). I tried the following:

I added this script:

    
            function realPostBack_FFV(eventTarget, eventArgument) {  
        
                 $find("<%= rap1.ClientID %>").__doPostBack(eventTarget, eventArgument);  
        
            }

and in codebehind, I tried to wire it up to the particular toolbar button

    
            For Each itm As RadToolBarButton In rtbActions.Items  
        
                 If itm.Value = "Download" Then 
        
                      itm.Attributes.Add("onclick", String.Format("realPostBack_FFV('{0}', ''); return false;", itm.UniqueID))  
        
                 End If 
        
            Next

However, this button still causes an ajax update. can someone help me figure out how to exclude a particular toolbar button from an ajaxupdate if the rest of the toolbar is ajaxified?

P.S., I also tried modifying the javascript to reference the AjaxManager instead of the Proxy, like so:

    
            function realPostBack_FFV(eventTarget, eventArgument) {     
        
                 $find("<%= Me.MyAjaxManager.ClientID %>").__doPostBack(eventTarget, eventArgument);     
        
            }    
        
             //Me.MyAjaxManager gets a reference to the shared AjaxManager in my base page class

But this dind't seem to make a difference.

4 Answers, 1 is accepted

answered on 02 Sep 2009, 01:23 PM

Hi Albert Shenker,

Unfortunately it is not that simple. Calling __doPostBack manually will not prevent ajax as the DOM element which triggers the click is within update panel (that's how ASP.NET Ajax determines whether to postback or make ajax).

I suggest the following solution instead:

    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            function onRequestStart(sender, args) {
                var eventTarget = args.get_eventTarget(); //the UniqueID of the control which triggers the ajax
                var toolBar = $find("<%= RadToolBar1.ClientID %>");

                if (eventTarget.replace(/\$/ig,"_") == toolBar.get_id()) { //check if this is the toolbar
                    var index = parseInt(args.get_eventArgument()); //the index of the button which was clicked
                    var button = toolBar.get_items().getItem(index);
                    if (button.get_text() == "Postback") { // cancel the ajax
                        args.set_enableAjax(false);
                    }
                }
            }
        </script>
    </telerik:RadCodeBlock>

    <telerik:RadAjaxManager runat="server" ClientEvents-OnRequestStart="onRequestStart">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadToolBar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadToolBar1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadToolBar runat="server" ID="RadToolBar1" AutoPostBack="true">
        <Items>
            <telerik:RadToolBarButton Text="Ajax"></telerik:RadToolBarButton>
            <telerik:RadToolBarButton Text="Postback"></telerik:RadToolBarButton>
        </Items>
    </telerik:RadToolBar>

Regards,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.