Button cannot be disabled from client side

7 posts, 1 answers
  1. Viktor Takacs
    Viktor Takacs avatar
    95 posts
    Member since:
    Mar 2006

    Posted 28 Jun 2011 Link to this post

    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
  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 28 Jun 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Viktor Takacs
    Viktor Takacs avatar
    95 posts
    Member since:
    Mar 2006

    Posted 29 Jun 2011 Link to this post

    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.


  5. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 29 Jun 2011 Link to this post

    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
  6. Viktor Takacs
    Viktor Takacs avatar
    95 posts
    Member since:
    Mar 2006

    Posted 29 Jun 2011 Link to this post

    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!





  7. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 01 Jul 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. Viktor Takacs
    Viktor Takacs avatar
    95 posts
    Member since:
    Mar 2006

    Posted 01 Jul 2011 Link to this post

    Hi Slav,

    Indeed, you are right.

    Now it's working as expected.

    Thanks for the help!

    v










Back to Top
UI for ASP.NET Ajax is Ready for VS 2017