Set Enabled / Disabled RadButton from client side

11 posts, 0 answers
  1. Michael
    Michael avatar
    3 posts
    Member since:
    Jan 2011

    Posted 10 Jan 2011 Link to this post

    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!
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 10 Jan 2011 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    3 posts
    Member since:
    Jan 2011

    Posted 10 Jan 2011 Link to this post

    Hello Pero,

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

    Best regards,
    Michael
  5. JJ
    JJ avatar
    147 posts
    Member since:
    May 2010

    Posted 18 Jan 2012 Link to this post

    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
  6. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 20 Jan 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  7. Michael
    Michael avatar
    19 posts
    Member since:
    Oct 2011

    Posted 16 Jul 2012 Link to this post

    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.
  8. Doug
    Doug avatar
    10 posts
    Member since:
    Aug 2011

    Posted 17 Jul 2012 Link to this post

    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

     

  9. JJ
    JJ avatar
    1 posts
    Member since:
    Aug 2014

    Posted 04 Aug 2014 Link to this post

    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;}
     
    }













  10. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 07 Aug 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. Bhavik
    Bhavik avatar
    1 posts
    Member since:
    Sep 2014

    Posted 03 Nov 2014 in reply to JJ Link to this post

    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.

  12. Peter
    Peter avatar
    98 posts
    Member since:
    Mar 2012

    Posted 22 Apr 2015 in reply to Bhavik Link to this post

    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" />

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