Button cannot be disabled from client side

[Viktor Takacs]

Hi,

I am trying to disable a submit button from the client side. I am using the following code:

function OkClicked(sender, args) {

           document.getElementById("<%=btnConfirm.ClientID %>").set_enabled(false);

        }

This is the markup for the button:

<telerik:RadButton ID="btnConfirm" runat="server" OnClick="btnConfirm_Click" Enabled="true">
<Icon SecondaryIconCssClass="rbOk" SecondaryIconRight="4" SecondaryIconTop="4" />
</telerik:RadButton>

When the button gets clicked it deosn't get disabled, but does a postback.I also tried the following script:

document.getElementById("<%=btnConfirm.ClientID %>").disabled = true;

In this case the button APPEARS disabled, but still responds to clicks and any other events (like hover).

What's going on here?

v

[Gimmik]

Hi Viktor,

There are a few issues that I see with your sample code:

1) The OnClick event is actually a server-side event, which requires a postback. You would have to add this method to your code-behind file to enable that event.

protected void btnConfirm_Click(object sender, EventArgs e)
{
    btnConfirm.Enabled = false;
}

I suspect that you already have the btnConfirm_Click method declared in the code-behind file, otherwise you could receive a compile-time error.

If you are trying to disable the button client-side, you must wire-up the OnClientClicked event. Here's an example:

ASPX:

<telerik:RadButton ID="RadButton1" runat="server" Text="Disable Me - ClientSide"
OnClientClicked="RadButton1_OnClientClicked" AutoPostBack="false" />

JavaScript:

function RadButton1_OnClientClicked(sender, args) {

    sender.set_enabled(false);

}

Notice the AutoPostBack="false" in the ASPX code? That is required due to the fact that the RadButton enabled setting isn't persistent on the client-side through a postback. If you require that functionality, you'll have to manually save the setting to the viewstate or a javascript variable, and reset it by wiring up the client-side onLoad() method.

I hope this helps,
-Gimmik

[Viktor Takacs]

Hi Gimmik,

Yes, indeed, I forgot to include in the code this part from the code behind:

btnConfirm.OnClientClicking = "ConfirmSubmit";

It has to be there in my case because it depends in certain conditions...

I tried using your code (with set_enabled) but the button is still active.
I also tried both OnClientClicking and OnClientClicked - no luck.

[Gimmik]

Hi Viktor,

The code I posted should be working for you. What version of the Telerik controls are you using?

Can you post your ASPX file - there seems to be another issue that I'm not seeing. Add an alert("Clicked"); to the Java Script function to verify it is actually being called.

-Gimmik

[Viktor Takacs]

Hi Gimmik,

I am using the latest version of the controls.

This is my markup file (I removed some irrelevant parts though):

<%@ Page Title="" Language="C#" MasterPageFile="~/general.master" AutoEventWireup="true"
    CodeFile="ConfirmOrder.aspx.cs" Inherits="ConfirmOrder" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    <script type="text/javascript">
        //<![CDATA[

        //Custom RadWindow Confirm
        function ConfirmSubmit(sender, args) {
            //Open the window
            $find("<%=confirmWindow.ClientID %>").show();
            //Focus the Yes button
            $find("<%=btnOk.ClientID %>").focus();
            //Cancel the postback
            args.set_cancel(true);
        }
        function OkClicked(sender, args) {
            var oWnd = $find("<%=confirmWindow.ClientID %>");
            oWnd.close();
            //document.getElementById("<%=btnConfirm.ClientID %>").set_enabled(false);
            $find("<%=btnConfirm.ClientID %>").click();
        }
        //]]>
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadWindowManager ID="windowManager1" runat="server">
    </telerik:RadWindowManager>
    <table width="95%">
        <tr class="CommandRow">
            <td colspan="2" align="center" class="CommandCell">
                <telerik:RadButton ID="btnBack" runat="server" OnClick="btnBack_Click" CausesValidation="false">
                    <Icon PrimaryIconCssClass="rbPrevious" PrimaryIconLeft="4" PrimaryIconTop="6" />
                </telerik:RadButton>
                <telerik:RadButton ID="btnConfirm" runat="server" OnClick="btnConfirm_Click" Enabled="true">
                    <Icon SecondaryIconCssClass="rbOk" SecondaryIconRight="4" SecondaryIconTop="4" />
                </telerik:RadButton>
            </td>
        </tr>
    </table>
    <telerik:RadWindow ID="confirmWindow" runat="server" VisibleTitlebar="false" VisibleStatusbar="false"
        Modal="true" Behaviors="None" Height="220px" Width="700px">
        <ContentTemplate>
            <div style="margin-top: 30px; float: left;">
                <div style="width: 60px; padding-left: 15px; float: left;">
                    <img src="images/system/ModalDialogAlert.gif" alt="Confirm Page" />
                </div>
                <div style="width: 550px; float: left;">
                    <asp:Label ID="lblConfirm" Font-Size="14px" runat="server" />
                    <br />
                    <br />
                    <telerik:RadButton ID="btnOk" runat="server" AutoPostBack="false" OnClientClicked="OkClicked">
                        <Icon PrimaryIconCssClass="rbOk" />
                    </telerik:RadButton>
                </div>
            </div>
        </ContentTemplate>
    </telerik:RadWindow>
</asp:Content>

And this is the codebehind (again, removed a lot that's not relevant):

btnConfirm.OnClientClicking = "ConfirmSubmit";

This is in the onLoad event of the page.
I know for sure that the event fires, because it executes all the other commands there, i.e. closes the radwindow and fires the click event.

I'm sure I am overlooking something because this is such a basic issue, it's just I have been going over this code so many times I can't see the obvious...

Thanks for your help!

[Slav]

Hello guys,

Indeed, using the set_enabled property is the correct way to disable or enable RadButton in the client. Please refer to this documentation article for a list of useful client-side properties and methods.

You should use the $find method for getting a reference to a RadControl on the client, the getElementById() method returns a reference to a DOM element and is used for finding generic HTML elements. So please replace getElementById with $find in your code:

function OkClicked(sender, args) {
    var oWnd = $find("<%=confirmWindow.ClientID %>");
    oWnd.close();
    $find("<%=btnConfirm.ClientID %>").set_enabled(false);
}

For your convenience I have attached a sample page, demonstrating enabling and disabling of RadButton through client-side code.

Kind regards,
Slav
the Telerik team

[Viktor Takacs]

Hi Slav,

Indeed, you are right.

Now it's working as expected.

Thanks for the help!

v