This is a migrated thread and some comments may be shown as answers.

CheckBoxFor wrong value submitted

7 Answers 856 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Marcel
Top achievements
Rank 1
Marcel asked on 26 Mar 2018, 04:03 PM

Hi,

I have a strange issue using the HtmlHelper generating a Checkbox using @Html.Kendo().CheckBoxFor(m => m.enabled) and submitting the form to my controller.
The issue happens after submitting the form when some server validation errors occur.
The form is properly rendered again, but when i re-submit the form, i get an error when the model is deserialized. (The value 'on, false' is not valid for Enabled).
Looking at the serialized form data i can see enabled actually have the value "on,false" instead of just "false".
Any ideas ?
Thanks in advance.

7 Answers, 1 is accepted

Sort by
0
Marcel
Top achievements
Rank 1
answered on 26 Mar 2018, 06:25 PM

Never mind, I already found the cause of it.
Since i was submitting the Form using ajax, i had to serialize the Form first ($(element).serialize()).
This is were getting the right values went wrong, so i used a JQuery plugin (https://github.com/raphaelm22/jquery.serializeToJSON) to serialize the form to Json.

Regards.

0
Dimitar
Telerik team
answered on 29 Mar 2018, 07:46 AM
Hello Marcel,

Thank you for sharing your solution.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 08 May 2018, 01:28 PM

Hi,

I am having the same problem except that the submit is done by the framework and I still get 2 values for the checkbox "on" and "false". This happens only if the first attempt has failed on the server.

0
Luis
Top achievements
Rank 1
answered on 09 May 2018, 07:01 PM

Hello,

I am also experiencing the same error after a failed post to the server. When I try to post back a checked checkbox I am receiving the following error: The value 'on,false' is not valid for <property>.

0
Dimitar
Telerik team
answered on 11 May 2018, 01:10 PM
Hello,

The reason behind the observed behavior is that the Kendo.CheckBoxFor() renders one additional hidden input. As a result, when the form is posted both on and false are sent to the server. The same behavior is reproduces by the native HtmlHelper CheckBoxFor() extension. To fix the error the data must be properly handled on the server-side.

Regards,
Dimitar
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 11 May 2018, 02:04 PM

Hi Dimitar,

I understand the reason for the additional hidden input. My problem is that the Kendo.Checkbox sometimes it has the value "true" and sometimes the value "on". That is why the server can not understand the value "on, false" to be converted to a Boolean value.

So the real question is: Is the kendoCheckBox value "on" function as design or is it a bug?

Also I did changed the Kendo.Checkbox into a HtmlHelper checkbox and I had absolutely no problem with sending the two inputs generated.

0
Joana
Telerik team
answered on 14 May 2018, 06:49 AM
Hi Dan,

Thank you for your time digging into the cause of the issue.

We investigated the issue and we managed to pin down it in our Checkbox widget. Generally speaking, "on" value is returned when there is no value attribute set to the input element. However, there is an issue in the rendering of the component that interfere the proper value setting and thus removes the value attribute leading to the observed behavior.

I logged it in our public github repo and we already pushed a fix in our code. You could track the progress of the issue here: https://github.com/telerik/kendo-ui-core/issues/4215 which is already in Ready For Test stage. The fix will be included in our next Latest Internal Build and in 2018 R2 SP1.

Regards,
Joana
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Marcel
Top achievements
Rank 1
Answers by
Marcel
Top achievements
Rank 1
Dimitar
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Luis
Top achievements
Rank 1
Joana
Telerik team
Share this question
or