Enable/Disable button while using FormDecorator

5 posts, 0 answers
  1. Paresh Patel
    Paresh Patel avatar
    13 posts
    Member since:
    Aug 2009

    Posted 18 Sep 2009 Link to this post

    Hi,
    I am using FormDecorator in my page.

    how can i enable/disable button using javascript ?
  2. Paresh Patel
    Paresh Patel avatar
    13 posts
    Member since:
    Aug 2009

    Posted 18 Sep 2009 Link to this post

    i used
            function enable(button)
            {            
                button.parentNode.className = 'rfdSkinnedButton';
                button.removeAttribute('disabled');
                button.parentNode.removeAttribute('disabled');
            }

            function disable(button)
            {
                button.parentNode.className = 'rfdSkinnedButton rfdInputDisabled';
                button.setAttribute('disabled', 'disabled');
                button.parentNode.setAttribute('disabled', 'disabled');
            }     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 22 Sep 2009 Link to this post

    You can use Telerik.Web.UI.RadFormDecorator.set_enabled method, e.g.
    <%@ 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> 
        <title></title>  
        <script type="text/javascript">  
            function toggleEnable() {  
                var btn = $get('nextButton');  
                Telerik.Web.UI.RadFormDecorator.set_enabled(btn, btn.disabled)  
            }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" /> 
        <input type="button" value="setEnableDisableToTheNextButton" onclick="toggleEnable()"/>  
        <input type="button" id="nextButton" value="NEXT BUTTON" /> 
        </form> 
    </body> 
    </html> 
  5. Alastair Hole
    Alastair Hole avatar
    4 posts
    Member since:
    Feb 2009

    Posted 13 Jan 2011 Link to this post

    Can this be done in the code behind?
  6. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 14 Jan 2011 Link to this post

    Hi Paresh Patel,

    The reason for this behavior is that when you set Enabled=False, the framework adds a specific class to that button (".aspNetDisabled"). RadFormDecorator on the other hand, does not style elements that has a class property set.
    Because RadFormDecorator is initiated and handled on the client only, it doesn't have a server API. What you can do however, is to use the client-side set_enabled() method that would allow you to disable buttons on the client.
    Because you said that you wanted to do that from the server, the only way to achieve this is to output a JavaScript function that would call the set_enabled() method. For convenience I prepared a small sample below that shows how to toggle the Enabled state of the button by using RadFormDecorator's method:

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
     
        protected void Button1_Click(object sender, EventArgs e)
        {
     
            if (Button2.Text == "Enabled Button")
            {
                Button2.Text = "Disabled Button";
                isEnabledField.Value = "false";
            }
            else
            {
                Button2.Text = "Enabled Button";
                isEnabledField.Value = "true";
            }
            var disable_script = String.Format("var t = function(){{ disableBtn(\"{0}\"); Sys.Application.remove_load(t);}}; Sys.Application.add_load(t);", Button2.ClientID);
            ScriptManager.RegisterStartupScript(this, this.GetType(), "disablebutton", disable_script, true);
        }
     
       
         
    </script>
    <head id="Head1" runat="server">
        <title>Padding</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="rs1" runat="server">
        </asp:ScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
        <asp:Button ID="Button1" runat="server" Text="Toggle the button below" OnClick="Button1_Click" /><br />
        <asp:Button ID="Button2" runat="server" Text="Enabled Button" />
        <asp:HiddenField ID="isEnabledField" runat="server" Value="true" />
        <script type="text/javascript">
     
     
            function disableBtn(ButtonID, isEnabled)
            {
                var oButton = $get(ButtonID);
                var isEnabled = $get("<%= isEnabledField.ClientID %>");
                if (isEnabled.value == "false")
                {
                    Telerik.Web.UI.RadFormDecorator.set_enabled(oButton, false);
                }
                else
                {
                    Telerik.Web.UI.RadFormDecorator.set_enabled(oButton, true);
                }
            }
        </script>
        
        </form>
    </body>
    </html>



    Greetings,
    Georgi Tunev
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017