Adding Client Clicked Event disables button events server/client both

[Jawwad]

This is my button. Adding onclick event disables

1. the mouseover / mouseout css
2. click event on server side
3. client javascript function is not working

<telerik:RadButton ID="btnEdit" runat="server" Icon-PrimaryIconCssClass="rbEdit" Icon-PrimaryIconLeft="4" Icon-PrimaryIconTop="3" Width="20px" ToolTip="Edit" OnClick="btnEdit_Click" OnClientClicked="return checkId();"></telerik:RadButton>

function checkId() {
            if (document.getElementById("<%=hidPointId.ClientID%>").value == '')
            { return false; }
else
{ return true; }
        }

[Konstantin Dikov]

Hi Jawwad,

First, the way that you are setting the event handler is incorrect. In the context of controls from our suite, you should set as an event handler only the name of the function:

OnClientClicking="checkId"

If you inspect your browser console with your current implementation you will notice that there is a JavaScript error, due to the way that you are setting the event handler.

Additionally, the OnClientClicked client-side event of the RadButton could not be canceled and generally, a combination of client-side and server-side click event is not recommended.

For your scenario, you should handle the OnClientClicking event, which could be canceled through the args.set_cancel(true) method:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function checkId(sender, args) {
            if (somecondition) {
                args.set_cancel(true);
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadButton ID="btnEdit" runat="server" Icon-PrimaryIconCssClass="rbEdit" Icon-PrimaryIconLeft="4"
    Icon-PrimaryIconTop="3" Width="20px" ToolTip="Edit" OnClick="btnEdit_Click" OnClientClicking="checkId">
</telerik:RadButton>

Hope this helps.


Regards,
Konstantin Dikov
Telerik