RadAjaxManagerProxy and asp:Button

[John]

Hi,
Following is my code.
--------------------------------

<telerik:RadAjaxManagerProxy ID="rdAjaxMgrProxy" runat="server">         
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnSearch">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="rgvUserData" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClientClick="return true;" /> 
------------------

And in code behind, I have a function which I want to run when button is clicked. 
Now when I click the button, server side code doesn't run.

it runs if I
1. Remove OnClientClick event from Button control
or
2. Remove btnSearch from RadAjaxManagerProxy block.

I can't do either because I need both the things. I want to validate my page when button is clicked by client JavaScript.
And I want my grid to be updated by Ajax once validation is complete.

Regards,
John

[Viktor Tachev]

Hi John,

In the code you have provided there is only OnClientClick event defined for the button. It is a client-side event and does not seem to have a handler attached.

In order to run the client-side Javascript and the server-side code behind you would need to attach a handler to the OnClientClik event and also add the OnClick server event. Note that it is recommended not to use return directly in the OnClientClick event. You should call a handler and use it to return true or false.

<asp:Button ID="Button1" runat="server" Text="click"  OnClientClick="foo();" OnClick="Button_Click" />

Javascript:

function foo() {
alert('test');
return true;
}

I hope this helps.

Regards,
Viktor Tachev
Telerik

[John]

Hi Victor,
I have done as suggested by you, but it runs server side code even if I return False from clientside function.
<asp:Button ID="Button1" runat="server" Text="click"  OnClientClick="foo();" OnClick="Button_Click" />

JavaScript

function foo() {

alert('test');

return false;
}

==========
Now when I click the button, it gives me alert (of test) but it also runs function Button_Click on server side. I don't want page to be post back if javascript returns false.


it works fine if I don't use button in RadAjaxManagerProxy block - I need to put button into that block as per my requirement.

Regards,
John

[Viktor Tachev]

Hi John,

Thank you for writing back.

When there is Ajax enabled for the Button control doPostback event handler is automatically added to the OnClientClick event. If you inspect the rendered html of the page you would see this for the Button:

<input name="Button1" id="Button1" onclick="foo();__doPostBack('Button1','')" type="button" value="click"/>

The doPostback function is called after foo() regardless of the returned result. In order to work around this you could use a condition in the client-side event that returns false explicitly. The definition for the button would look like so:

<asp:Button ID="Button1" runat="server" Text="click" OnClientClick="if (!foo()) return false;" OnClick="Button1_Click" />

The rendered code for the Button would look like below:

<input name="Button1" id="Button1" onclick="if (!foo()) return false;__doPostBack('Button1','')" type="button" value="click"/>

This time when a value is returned the doPostback() function will not be called.

I am attaching a sample project illustrating this approach. Give this approach a try and you should have no problems.

Regards,
Viktor Tachev
Telerik

[John]

Hi Victor,

Your solution worked.

Thanx.

Regards,
John