Paresh Patel
Top achievements
Rank 1
Rank 1
Paresh Patel
asked on 18 Sep 2009, 02:27 PM
Hi,
I am using FormDecorator in my page.
how can i enable/disable button using javascript ?
I am using FormDecorator in my page.
how can i enable/disable button using javascript ?
4 Answers, 1 is accepted
0
Paresh Patel
Top achievements
Rank 1
Rank 1
answered on 18 Sep 2009, 02:34 PM
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');
}
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');
}
0
Obi-Wan Kenobi
Top achievements
Rank 1
Rank 1
answered on 22 Sep 2009, 03:39 PM
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> |
0
Alastair Hole
Top achievements
Rank 1
Rank 1
answered on 13 Jan 2011, 01:57 PM
Can this be done in the code behind?
0
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:
Greetings,
Georgi Tunev
the Telerik team
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.