javascriptcheckboxdevexpress

Ask for client side confirmation when a DevExpress ASPxCheckBox changes


I'm trying to add a confirmation dialog to have the user confirm changes to the checked status of an ASPxCheckBox.

Take 1
Based on this DevExpress support center question I'm trying the following code:

<dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server">
    <ClientSideEvents CheckedChanged="ConfirmChange" />
</dx:ASPxCheckBox> 

With this JavaScript:

function ConfirmChange (s, e) {
    console.log(s);
    console.log(e);
    return false; // For testing
    // return confirm(); // Should become this
}

I was hoping/expecting the return false bit to prevent the change, but it happens nonetheless. I've gone through the console logged parameters to see if I can affect anything there, but doesn't look like it. I've also read the CheckedChanged DevExpress documentation but it holds no clue to my purpose either.

Take 2
I've also tried doing this in code behind:

var checkbox = (ASPxCheckBox)myGridView.FindEditRowCellTemplateControl(myCol, "ASPxCheckBox1";
checkbox.Attributes.Add("onclick", "return confirm('You sure?')")

This also pops up the confirm dialog, which fails to prevent a change if cancel is clicked.

Take 3
Finally, based a suggestion in one of the early answers here, I've also tried going the validation route:

<dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server">
    <ClientSideEvents Validation="ConfirmChange" />
</dx:ASPxCheckBox> 

JavaScript:

function ConfirmChange (s, e) {
    e.isValid = confirm();
}

However, this doesn't prevent or revert the change, but presents a validation error if you hit cancel in the confirm dialog.

So, bottom line
How can I inject a client side confirmation dialog before the ASPxCheckBox's change happens?


Solution

  • You cannot prevent the change in ASPxClientCheckBox.CheckedChanged event because this event occurs on the client side when the editor's checked state is changed. You can revert value by using ASPxClientCheckBox.GetChecked method and ASPxClientCheckBox.SetChecked method.
    Here is example:

    <dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server">
        <ClientSideEvents CheckedChanged="ConfirmChange" />
    </dx:ASPxCheckBox> 
    

    JavaScript:

    function ConfirmChange (s, e) {
        console.log(s);
        console.log(e);
    
        //Save the checked state
        value = s.GetChecked();
    
        //Revert changes immediately
        s.SetChecked(!s.GetChecked());
    
        result = false; // For testing
        // result = confirm(); // Should become this
    
        if (result) {s.SetChecked(value);}
    }