RadButton causing postback despite requiredfieldvalidator check

[Scott Smith]

I'm using a RadButton inside a RadListView with ItemTemplate.  The button is supposed to cause a post-back (handled by the ItemCommand of the RadListView) if a value in a RadTextBox is present, otherwise just display the RequiredFieldValidator/ValidationSummary info.

I've got it working to the point where it will validate the field (it pops the RequiredFieldValidator message as per the instructions in the ValidationSummary control), however regardless of whether or not the validator fires, it still does the postback and fires the ItemCommand handler.

html:

<telerik:RadListView ID="lstCommissions" runat="server"
    DataKeyNames="EmployeeCommissionBankID"
    ItemPlaceholderID="plhCommissions"
    OnItemCommand="lstCommissions_ItemCommand"
    OnItemDataBound="lstCommissions_ItemDataBound"
    OnNeedDataSource="lstCommissions_NeedDataSource"
>
    <LayoutTemplate>

<div class="CommissionControlContainer">
    <div class="LoanNumberTitle">Loan Number</div>
    <div class="CommissionTotalTitle">Commission</div>
    <div class="SpreadTitle">Commission Spread</div>
    <asp:PlaceHolder ID="plhCommissions" runat="server" />
</div>

    </LayoutTemplate>

    <ItemTemplate>

    <div class="RowContainer">
        <div class="LoanNumber"><asp:Label ID="lblLoanNumber" runat="server" /></div>
        <div class="CommissionTotal"><asp:Label ID="lblCommissionTotal" runat="server" /></div>
        <div class="SpreadButton">
            <telerik:RadButton ID="btnSplit" runat="server"
                AutoPostBack="true"
                ButtonType="ToggleButton"
                CausesValidation="true"
                CommandName="Split"
                CommandArgument='<% Bind("LoanNumber"); %>'
                Style="padding-left: 25px;"
                ToggleType="CheckBox"
            >
                <ToggleStates>
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbRemove" Text="Remove Spread" />
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbOk" Text="Spread" />
                </ToggleStates>
            </telerik:RadButton>
        </div>
        <div class="SpreadValue">
            <telerik:RadNumericTextBox ID="txtSpreadAmount" runat="server"
                AutoPostBack="true"
            />
            <asp:RequiredFieldValidator ID="rfvSpreadAmount" runat="server"
                ControlToValidate="txtSpreadAmount"
                ErrorMessage="Spread amount is required"
                Text="*"
            />
            <asp:ValidationSummary ID="vsSpreadAmount" runat="server"
                DisplayMode="BulletList"
                ShowMessageBox="true"
                ShowSummary="false"
                Visible="true"
            />
        </div>

    </div>

    </ItemTemplate>

</telerik:RadListView>

Just to verify to you that I'm setting the ValidationGroup for all controls involved (it is being set in code in the ItemDataBound handler):

if (e.Item is RadListViewDataItem)
{
    RadListViewDataItem item = e.Item as RadListViewDataItem;

    // item-level objects
    Label lblLoanNumber = item.FindControl("lblLoanNumber") as Label;
    Label lblCommissionTotal = item.FindControl("lblCommissionTotal") as Label;
    RadNumericTextBox txtSpreadAmount = item.FindControl("txtSpreadAmount") as RadNumericTextBox;
    RadButton btnSplit = item.FindControl("btnSplit") as RadButton;
    RequiredFieldValidator rfvSpreadAmount = item.FindControl("rfvSpreadAmount") as RequiredFieldValidator;
    ValidationSummary vsSpreadAmount = item.FindControl("vsSpreadAmount") as ValidationSummary;

    EmployeeCommissionEntity ec = item.DataItem as EmployeeCommissionEntity;

    if (ec.Amount.HasValue)
    {
        // set the validation groups for all the controls that need it
        btnSplit.ValidationGroup =
        txtSpreadAmount.ValidationGroup =
        rfvSpreadAmount.ValidationGroup =
        vsSpreadAmount.ValidationGroup =
            "Split_" + ec.EmployeeCommissionBankID.ToString().Replace("-", string.Empty);

        lblLoanNumber.Text = ec.LoanNumber;
        lblCommissionTotal.Text = string.Format("{0:c}", ec.Amount);

        txtSpreadAmount.MaxValue = ec.Amount.Value.ToDouble();
        txtSpreadAmount.MinValue = 0;
    }
    else
        item.Visible = false;
}

Any ideas?  I'm going to handle this server-side (I'll test the text box and if it's blank I'll set the toggle of the button back to unchecked) but I'd really like the standard asp controls to handle it so no post-back happens unless it needs to.

Thanks
-
Scott

[Scott Smith]

Just as a follow-up, after debugging, I found out that if the RequiredFieldValidator fires negatively (required field is empty), it does not in fact fire the post-back.  It does, however, still toggle the button to the alternate graphic (note that I'm using the RadButton with ButtonType="ToggleButton" and ToggleType="CheckBox" so I can allow the user to remove the value from the text box with the button and reset the button back to the "rbOk" state).

I suppose what I really need now is to figure out how to keep the 'Checked="false"' state of the button when the RequredFieldValidator fires negatively.  Shouldn't this be part of the button logic if it's tied to client-side validation or is this something I'll need to figure out with javascript?  It's pretty difficult since it's in a RadListView to fire a handler and check another control (the validation summary?  not sure even what to check) in the RadListView's current item.

Any pointers on that?

Thanks again

-
Scott

[Pero]

Hello Scott,

The RadButton behaves exactly like the ASP.NET CheckBox and RadioButton when they trigger the client-side validation - it changes its checked state and triggers the validation. To prevent changing of the RadButton's checked state, handle the checkedChanging client-side event (OnClientCheckedChanging property) and if the page is invalid cancel the event. Here is an example showing this:

aspx

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function OnClientCheckedChanging(button, args)
        {
            if (!Page_IsValid)
            {
                args.set_cancel(true);
            }
        }
    </script>
    <asp:TextBox runat="server" ID="txt1" /><asp:RequiredFieldValidator ErrorMessage="ERror"
        ControlToValidate="txt1" runat="server" />
    <div>
        <telerik:RadButton ID="RadButton1" runat="server" Text="RadButton" OnClick="RadButton1_Click"
            ButtonType="ToggleButton" ToggleType="CheckBox" OnClientCheckedChanging="OnClientCheckedChanging">
        </telerik:RadButton>
        <asp:CheckBox Text="ASP CheckBox" runat="server" AutoPostBack="true" CausesValidation="true" />
        <br />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
    </form>
</body>
</html>

cs

using System;

public partial class Default_Button : System.Web.UI.Page
{
    protected void RadButton1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
    }
}

Regards,
Pero
the Telerik team