OnClientClicking breaks AutoPostBack?

[Andrew]

Hi all,

I seem to be running into an issue...  When the OnClientClicking event is handled, the button will not auto post back (even if AutoPostBack=true and the event is not canceled).  I can work around the issue by manually invoking click() in the handler -or- I saw this post about toggling the autopostback in the client clicked handler.

But, I guess I want to know if this is a bug? or by design (and I'm using the clicking handler incorrectly/for the wrong purpose)?

Markup:

<form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" />
    <div>
        <telerik:RadScriptBlock>
            <script type="text/javascript">
                function testButtonClicking(sender, args) {
                    var confirmed = confirm("Are you sure you want to postback?");
                    if (confirmed)
                        sender.click(); // I wouldn't think this would be neccesary?
                    else
                        args.set_cancel(true);
                }
            </script>
        </telerik:RadScriptBlock>
        <telerik:RadButton runat="server"  ID="TestButton" Text="Test Confirm"
        ButtonType="StandardButton"  OnClientClicking="testButtonClicking"
        OnClick="TestButton_Click" AutoPostBack="true" />
    </div>
</form>

Code behind:

protected void TestButton_Click(object sender, EventArgs e)
{
     Page.Response.Write("posted back");
}

Environment: IIS 7.5 / ASP.NET 4.0

[Pero]

Hi Andrew,

By design the "clicking" (OnClientClicking property) client-side event is fired when the user performs a mouse-down. If an alert or confirm is displayed, the user will release the button which means the code by default executed the click DOM event will not be executed at all (the click event is not fired), and that's why the button does not postback even if the user clicks OK on the confirm.

We are considering moving the clicking event at a later stage, because the mousedown might be too early and the user can't execute its logic.

Greetings,
Pero
the Telerik team

[Andrew]

Hi Pero,

Thank you for the quick reply -- that makes sense.  Might I suggest updating the demos to be more specific about the behavior of the OnClientClicking event?  Right now it just says, "raised when the user clicks the button. The event can be canceled."  (There's no explanation of the button's events in the documentation yet.)

And a second suggestion:  Add functionality/support to the OnClientClicked handler so that it can be canceled without having to change the AutoPostBack and/or consume the DOM event.

Thanks for all you do!
Andy

[Pero]

Hi Andrew,

We will update the documentation of the RadButton control so that its client-side events are explained clearly.

Also the OnClientClicking event will be moved at a later stage, because as its name suggests it should be fired when the user clicks the button, and not right after he performs mouse-down.

You should expect the changes in the next Q3 2010 Service Pack release, scheduled for mid-December.

Regards,
Pero
the Telerik team

[Andrew]

Hi everyone,

I just pulled down the latest release of the codeset (2010.3 1215 [Dec 15, 2010]) and the button works great!  The OnClientClicking event now fires after a full click instead of onMouseDown.

<script type="text/javascript">
     function testButtonClicking(sender, args) {
          var confirmed = confirm("Are you sure you want to postback?");
          args.set_cancel(!confirmed);
     }
</script>

Thanks for all your work!
Andy

[Jonx]

Hello,
Thank you very much Andrew for the sample. This saved my day...

Another sample just for the record: I want to prevent a postback in case nothing is selected in my combo and warn the user about it.

The code...

<telerik:RadButton ID="btnStagiaireAdd" runat="server" Text="Ajouter ce stagiaire à la session" UseSubmitBehavior="false"
            CausesValidation="false" OnClick="btnStagiaireAdd_Click" OnClientClicking="IsStudentSelected" >
            <Icon PrimaryIconCssClass="rbOk" />
        </telerik:RadButton>

The javascript...

function IsStudentSelected(sender, args) {
                var combo = $find('cbbStagiaires');
                var comboItem = combo.get_selectedItem();
                if (comboItem == null) {
                    AlertMissingStudent();
                    args.set_cancel(true);
                }
            }

Now Pero, like you said a month ago, please update the documentation. This info is very hard to find and I just lost 2 hours because of that.

The code is excellent but the documentation can be improved.

Thanks a lot in advance.

John.

[Pero]

Hello John,

Thank you for sharing your code with the community!
The documentation of the RadButton will be updated for the upcoming release, Q1 2011.

Best wishes,
Pero
the Telerik team

[Jonx]

Good to know that you will update the doc soon.

I did report most of the troubles I encountered since I bought your components last summer and I saw no change in the mentionned docs yet.

The vast majority of my problems were due to the fact I could not find how to do things... Strugling to find a way only to discover after some time (sometime a long time) that your control already did it, just the doc forgot to mention about it...
Only a couple of times it was a real bug, one time a regression and even less times something that cannot be done right now (silverlight pivot for example).

Thank you for your controls and for the support. The forum has most of the answers anyway...

John.

[Idith]

Hi,
I have Telerik version of Q3 2010 but I still doesn't get postback after using OnClientClicking.
I am trying to get user confirmation for adding an object.
Maybe you can tell me what am I doing wrong.
Java script:

<

 

script type="text/javascript">

 

 

    function UserClicking(sender, args) {

 

 

    if (confirm(" Do you wish to add another record?")) {

 

       }

 

    else {

 

        // args.set_cancel(true); this line is in comment since I wanted to isolate the problem.

    }

}

</

 

script>
Aspx:

 

 

<telerik:RadButton ID="ButtonCreateNew" runat="server" OnClientClicking="UserClicking" Text="Add"

 

 

    onclick="ButtonCreateNew_Click" AutoPostBack="true">

 

 

    <Icon PrimaryIconCssClass="rbAdd" PrimaryIconLeft="4" PrimaryIconTop="4" />

 

 

</telerik:RadButton>

 

 

 

By the way of grid button there is a build in attribute for confirmation, it seems a bit odd that it is missing from the rad button.

[Slav]

Hi Idith,

Raising OnClientClicking client-side event at a later stage is implemented in Q3 2010 SP1, so you should update RadControls to this version or higher, if you want your button to trigger postback.

Another solution is to manually invoke the click event in your OnClientClicking event handler, as done in the first post and in the code sample below:

<script type="text/javascript">
           function UserClicking(sender, args) {
                if (confirm("Do you wish to add another record?")) {
                    sender.click();
                } else {
                    args.set_cancel(true);
                }
            }
</script>

Regards,
Slav
the Telerik team

[Hüseyin]

wtgw