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

[Vasssek]

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

[Kevin]

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.

[Vasssek]

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

[Slav]

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

[Vasssek]

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