Set Enabled / Disabled RadButton from client side

[Michael]

Hi Telerik-Team,

I make my first experience with RadButton.
Simple Question - hao can I  set enable property from client side? 
javascript  not working and RadButton still remain disabled:

function

 

EnableDisable() {
    button2 = document.getElementById("RadButton2_input");
    button2.disabled = false;
}

 

Thanks in advance!

[Pero]

Hello Michael,

The RadButton control creates a client-side object, as all of our Ajax enabled RadControls do. To get a reference to this object you should use the $find(controlId) method. After you have a reference to the control, you could use its client-side methods, and more specifically you could enable/disable the button itself using the set_enabled(toEnable) method. Your code will look like the following:

function EnableDisable() {
    var button2 = $find("RadButton2");
    button2.set_enabled(false);
}

Regards,
Pero
the Telerik team

[Allen]

So if I understand this correctly, no other javascript or jQuery type property settings will affect the button's enabled state?

And looking at the other comments, they appear to favor  $find("<%= radbuttonID.ClientID %>") ? When does this distinction matter? 

[Vessy]

Hello Allen,

When a control having a runat="server" property is placed inside a naming container (like a master page) its ID is modified. In such scenarios, you need to use its  ClientID taken from the server in order to refer the control:

https://docs.microsoft.com/en-us/previous-versions/aspnet/858twd77(v%3Dvs.100)  

 

[Michael]

Hello Pero,

it works fine!
Thank you very much for your quick replies!

Best regards,
Michael

[JJ]

My button is nested inside radgrid.

when form load, use

var button2 = $find("RadButton2");

will not find the button and will get error

I used view source to get the button id - ctl00_MainContent_ucDataDropOffUCPhase1_RadPanelBar1_i0_rggrid

var btn = document.getElementById("ctl00_MainContent_ucDataDropOffUCPhase1_RadPanelBar1_i0_rggrid");
btn.set_enabled(true);

it gives me error object does not surrport this propery or method.





What control I need to use in order to use btn.set_enabled?





Thanks

[Slav]

Hello,

To get the reference to the RadButton's client-side object correctly, you should use the $find(controlId) method, as explained by Pero:

var btn = $find("ctl00_MainContent_ucDataDropOffUCPhase1_RadPanelBar1_i0_rggrid");
btn.set_enabled(true);

Another option for referencing the RadButtons in a RadGrid is to use their client-side event OnClientLoad in order to retrieve the client-side object of every button and to populate a global array of buttons.

RadButton inside the RadGrid

<telerik:RadButton ID="checkAssigned" runat="server" OnClientLoad="ButtonLoad">
</telerik:RadButton>

Global array declaration and OnClientLoad event handler:

<script type="text/javascript">
    var buttons = [];
    function ButtonLoad(sender, args)
    {
        Array.add(buttons, sender);
    }
</script>

Regards,
Slav
the Telerik team

[Michael]

That's not valid. 

My button is declared as:

<telerik:RadButton runat="server" ID="rbtnSave" Text=" Save " ButtonType="StandardButton" CommandName="Save" CommandArgument="SaveChanges" Enabled="false" />

In order to change the enabled property I had to use:

$('#<%=rbtnSave.ClientID%>')[0].control.set_enabled(true);

The important different being the added "[0].control" bit. I use <%=rbtnSave.ClientID%> so my JS will work with ASP.Net dynamic IDs correctly.

[Doug]

I recommend trying $find("<%= radbuttonID.ClientID %>");
for example, my RadButton is implemented in part as:

<telerik:RadButton ID="saveAs" AutoPostBack="false" runat="server" OnClientClicked="SaveResults" ...
In my script I have a function that needs to enable/disable the button, so it uses this line of code:
var saveButton = $find("<%= saveAs.ClientID %>");
and then:
saveButton.set_enabled(true); // or false

Works for me

 

[JJ]

Hi

When the user click on the save button of the RadGrid and it is not valid it does nothing and when the RadGrid is valid it does save. That all works fine...

I want to alert a message on client side when RadGrid is not valid. How can I check in java-script function when the RadGrid is valid or not for save?

<telerik:RadGrid
...

<CommandItemTemplate>
                            <asp:Button runat="server" ID="UpdateAll" Text="Save" CommandName="UpdateAll" OnClientClick="return UserSaveConfirmation();"  />
                            <asp:Button runat="server" ID="CancelAll" Text="Cancel" CommandName="CancelAll"  OnClientClick="if ( ! UserCancelConfirmation()) return false;" />


   </CommandItemTemplate>

...


  </telerik:RadGrid>


 <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

         <script type="text/javascript">

                   function UserSaveConfirmation() {

                                var radGrid = $get("rdRoutineAttributeValuesDetails");

                                 ?? if RadGrid.IsValid() { alert('Cannot save, grid values format is not valid. Please correct and try again.') return false;}

}

[Danail Vasilev]

Hi JJ,

You can try to pass the id of the cell that you want to validate to the UserSaveConfirmation function in the ItemDataBound event, following the approach from this forum post.

Regards,
Danail Vasilev
Telerik

 

 

[Bhavik]

Hi,

Earlier i was facing same issue, here there is a difference with id what we used to find control.

in my case, i am using AutoCompletebox in repeater control, html is rendered with ID = "CBR1_rptCallBackReason_ctl10_ddlRequestLine_Input", but to make it enable/disable following code worked

var cmb =
$find("CBR1_rptCallBackReason_ctl10_ddlRequestLine");
cmb.set_enabled(true);

i need to remove _input from id.

[Peter]

This worked for me (note the SetTimeout to ensure the server event still fires):

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
           function SendClicked(sender, args) {
                var btnSendToVrp = $find("<%=btnSend.ClientID %>");

                setTimeout(function(){
                    btnSendToVrp.set_enabled(false);
                    btnSendToVrp.set_text('Please Wait...'); },
                    200);
            }
        </script>
    </telerik:RadCodeBlock>

 

<telerik:RadButton runat="server" ID="btnSend" Text="Send" OnClick="btnSend_Click" OnClientClicked="SendClicked" />