Client Side events not firing and rendering issues

[Benjamin]

Hello,

I've been trying to implement some logic using RadButton, RadComboBox and RadTextBox altogether in order to set a RadLabel text.
Everything is part of an Edit Form of a RadGrid component using EditFormType="WebUserControl"

Below is my ASPX code :

01.<telerik:RadButton ID="RadButton1" runat="server" ToggleType="Radio"
02.  ButtonType="StandardButton" AutoPostBack="false" ReadOnly="true" ClientIDMode="Static"
03.  UseSubmitBehavior="false" RenderMode="Lightweight" GroupName="GroupTest"
04.  Checked="true">
05.  <ToggleStates>
06.    <telerik:RadButtonToggleState Text="TTC" PrimaryIconCssClass="rbToggleRadioChecked" />
07.    <telerik:RadButtonToggleState Text="TTC" PrimaryIconCssClass="rbToggleRadio" />
08.  </ToggleStates>
09.</telerik:RadButton>
10.<telerik:RadButton ID="RadButton2" runat="server" ToggleType="Radio"
11.  ButtonType="StandardButton" AutoPostBack="false" ReadOnly="true" ClientIDMode="Static"
12.  UseSubmitBehavior="false" RenderMode="Lightweight" GroupName="GroupTest" >
13.  <ToggleStates>
14.    <telerik:RadButtonToggleState Text="HT" PrimaryIconCssClass="rbToggleRadioChecked" />
15.    <telerik:RadButtonToggleState Text="HT" PrimaryIconCssClass="rbToggleRadio" />
16.  </ToggleStates>
17.</telerik:RadButton>
18.<telerik:RadTextBox ID="RadTextBox1" runat="server"
19.  Text='<%# DataBinder.Eval(Container, "DataItem.Field1") %>' RenderMode="Lightweight"
20.  onkeyup="myJsFunction1(event, 'RadTextBox1');"
21.  Width="110px" ClientIDMode="Static"></telerik:RadTextBox>
22.<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight"
23.  SelectedValue='<%# DataBinder.Eval(Container, "DataItem.Field2") %>'
24.  DataTextField="value" DataValueField="value" Width="80px" ClientIDMode="Static"></telerik:RadComboBox>
25.<telerik:RadLabel ID="RadLabel1" runat="server" RenderMode="Lightweight"
26.  ClientIDMode="Static"></telerik:RadLabel>

 

So my issue is that everytime I try to use some built in Telerik ClientEvent for RadComboBox, RadTextBox or RadButton I'm facing two problems :

1. My JavaScript function supposed to be called is never called e.g. OnClientCheckedChanged="myJsFunction" is never fired
2. As soon as one component has an OnClient event declared (whether it's the RadButton, the RadTextBox or the RadCombobox) the RadButton rendering is totally messed up (see the screenshot_1.png attached to good display and screenshot_2.png attached for messed up display))

In place of the RadTextBox's onkeyup if I use the ClientEvents-OnKeyPress event I get exactly the same problem.

I also tried to implement some client side logic to the same RadButton shown up there outside of any RadGrid but I'm still facing this issue.

I am really facing a dead end with this. Of course I could use some ASP basic controls to implement the behavior but I'd like to keep some coherence for the rendering of my web page.

Regards,

Benjamin Bourgeois.

[Danail Vasilev]

Hello Benjamin,

Since the issue is reproducible outside of the grid edit form there might be some global/general issue. What I can suggest is the following:
    - Are there any JavaScript errors on the page? If there are such errors they should be found and fixed.
    - If you are not using latest Telerik UI version - 2016.1.225, does upgrading to it help?
    - Can you ensure you have properly defined the handlers? You can examine the following help resources on the matter:
http://docs.telerik.com/devtools/aspnet-ajax/controls/button/client-side-programming/events/overview
http://www.telerik.com/blogs/migrating-onclientclick-handlers-from-asp-button-to-telerik-s-asp-net-ajax-button

If the above steps, however, do not help could you please paste below the simple button's declaration along with the handler, so that I can reproduce it locally and provide a solution if possible?

Regards,
Danail Vasilev
Telerik

[Benjamin]

Hello Danail,

Thanks for your reply.

Actually I just found what I was doing wrong (thanks to your second link).

When using Telerik client side events I was trying to call my JS function with JS syntax like this: OnClientCheckedChanged="myJsFunction();"
The right thing to do here is to not use JS syntax, just to call the JS function in a code behind like way (no parenthesis nor semi colon): OnClientCheckedChanged="myJsFunction"

I suppose telerik is compiling those client side events calls, reason why the rendering was messed up.

Now everything is working fine.

Thank you again,

Regards,

Benjamin.