Set Kendo Switch checked via javascript

[Giovanni]

Hi, I would like to use a kendo switch inside a form: I' created a little example at:

https://stackblitz.com/edit/react-k3fw3s

 

I need to set the initial value programmatically.

So, I created a function switchSetOn (in the file MyUtils.js) to do this using jquery.

This function works well, because the switch correctly appears as ON, but if I click on it the first click does not work and the control remains ON (after a small movement): from subsequent clicks it works fine.

So, I think that the react control keep is value to false even if I set (via jquery) the aspect to true.

Is there a way to set the value correctly via jquery? (I don't want to use defaultChecked or checked property of the control)

Another problem is that, when I click on the submit button the value of the hidden input "checkbox" of the switch does not fall into the json (I can see only the value of the input "text"). Is there something I have to do to obtain the value?

Thank you

 

[Konstantin Dikov]

Hi Giovanni,

If the requirement is to set initial value to the Switch component you can use the "defaultValue" and "defaultChecked" properties:

• https://www.telerik.com/kendo-react-ui/components/inputs/api/SwitchProps/#toc-defaultchecked

As for programmatically setting the value, you can get reference to the component and use its "toggle" function. I have modified the example, so it can use the toggle function instead:

• https://stackblitz.com/edit/react-cc1aou?file=src%2FApp.js

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Giovanni]

Thank you, the "toggle" function works fine for my needs.

But, is this toggle function a kendo function? And where is documented?

[Konstantin Dikov]

Hi Giovanni,

The toggle function is not mentioned in the API of the Switch and it is used by the component for its internal functionality. However, it is useful and I will talk with the team to see if we can include it in the documentation.

 

[Giovanni]

Ok, thank you.