How to: same function when user clicks on label as it is on radbutton checkbox

5 posts, 1 answers
  1. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 07 Oct 2011 Link to this post

    Hello Telerik Team,

    I have an issue with radbutton control which acts as checkbox. What I've tried to achieve is to have same onclick event when user will click on asp:label control as it has when he clicks on radbutton itself. I don't want to use text property of radbutton because of css formatting. For further information, please check code below and picture in the attachment.

    <asp:Panel runat="server" ID="pnl_spustit_schvalovaci_proces">
          <div class="LabelStyle1" style="clear: both; float: left; padding: 20px 10px 0px 2px">
                   <asp:Label ID="Label35" runat="server" Text="Spustiť schvaľovací proces"></asp:Label>
           </div>
           <div style="float: left; padding: 20px 0px 0px 0px">
                     <telerik:RadButton ID="chk_spustit_schvalovaci_proces" runat="server" 
                                   ButtonType="ToggleButton" ToggleType="CheckBox" 
                                   OnClientClicking="spustit_schvalovaci_proces_OnClientClicking">                                    
                      </telerik:RadButton>
              </div>
    </asp:Panel>

    The question is, how to bind onclick event to label control with same object id as radbutton. Maybe via some jquery commands ?

    Please help me to solve this issue.

    Best regards

    Vasssek
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 07 Oct 2011 Link to this post

    Hello Vasssek,

    I'm assuming what you want to achieve when they click the label is to perform a click on the associated RadButton. To do that, just do this:

    <asp:Label ID="Label1" runat="server" Text="Some Label" onclick="clickButton()"></asp:Label>
      
    <script type="text/javascript">
        function clickButton(){
            $find("<%=RadButton1.ClientID%>").click();
        }
    </script>

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 07 Oct 2011 Link to this post

    Hello Kevin,

    thank you for your suggestion, but it works just partially. Yes, it fires function clickButton() when I click on label control, but I doesn't rise client event of radbutton OnClientClicking="spustit_schvalovaci_proces_OnClientClicking" as it is, when you click directly on radbutton checkbox control. And also it didn't change checked state of radbutton, even though it can be changed via control.set_checked(true or false).

    Please help me to solve this issue once again...

    Thank you

    Vasssek

  5. Answer
    Slav
    Admin
    Slav avatar
    1355 posts

    Posted 11 Oct 2011 Link to this post

    Hello Vaclav,

    I can suggest two approaches for the current scenario:

    1. You can use the Text property of the RadButton in order to set a label and then you can utilize CSS in order to style it by cascading to the class rbText, as shown below:
    <style type="text/css">
        .RadButton .rbText
        {
            font-size: 16px;
            color:Blue;
        }
    </style>

    2. You can use the method, suggested by Kevin, and expand it a little. The client method raiseEvent should be called in order to raise the OnClientClicking event, because it is not raised when the click method is used, as you have already noticed. In addition to this, you will have to utilize the client method set_checked so that the checked status of the checkbox is updated accordingly. The following example demonstrates the described modifications:
    <asp:Label ID="Label1" runat="server" Text="Some Label" onclick="clickButton()"></asp:Label>

    <script type=
    "text/javascript">
        function clickButton() {
            var button = $find("<%=chk_spustit_schvalovaci_proces.ClientID%>");
            button.set_checked(!button.get_checked());
            button.raiseEvent("clicking", true);
            button.click();
        }
    </script>


    Greetings,
    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
  6. Vasssek
    Vasssek avatar
    143 posts
    Member since:
    Aug 2010

    Posted 17 Oct 2011 Link to this post

    Hello,

    thank you for your code example.

    It worked as I expected. The important line of code was: button.raiseEvent("clicking", true);

    After that the onclick function of label control raised OnClientClicking event of radbutton.

    Best regards

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