Thought I'd post this for anyone who has a similar issue. And also for kendo staff to see and fix (if it is indeed a bug).
Note: all references to input are in regard to type=checkbox and type=radio, not text input areas
I was adding input boxes to a mobile listview and found that if any tag is added outside of the label tag holding the input, the input doesn't work. It also appears that an input without a label container doesn't seem to function properly either. Whereas a input defined inside a label inside a mobile listview will have extra classes and an ::after appended to it, none of these show up in the case noted in the first sentence of this paragraph. I finally got it to work with a workaround after observing "correctly working" inputs and what kendo injects into the html for those items.
IT policy at my work prevents me from creating a code snippet, so I pasted the code below, which is a modified version of http://demos.telerik.com/kendo-ui/m/index#popover/index:
<!DOCTYPE html><html><head> <base href="http://demos.telerik.com/kendo-ui/m/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css" /> <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script></head><body><div data-role="view" data-title="Tag this photo" id="popover" data-use-native-scrolling="true"> <div data-role="header"> <div data-role="navbar"> <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a> <span data-role="view-title"></span> <a data-align="right" data-rel="popover" href="#popover-people" data-role="button" data-icon="contacts"></a> <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a> </div> </div> <div data-role="content" style="text-align: center;"> <img src="../content/mobile/shared/faces.jpg" /> </div> <div data-role="popover" id="popover-people" data-popup='{"height": "20em", "width": "20em"}'> <div data-role="view" data-title="People"> <div data-role="header"> <div data-role="navbar" class="km-light"> <span data-role="view-title"></span> <a data-role="button" data-align="right" data-click="closeParentPopover" data-icon="close"></a> </div> </div> <ul data-role="listview" data-click="clickit"> <li><label>Isabella Anderson<input type="checkbox" checked="checked" class="km-widget km-icon km-check"></label><span>Test</span></li> <li><input type="checkbox" checked="checked"></li> <li><label>Linda Anderson<input type="checkbox"></label></li> <li><label>Oliver Anderson<input type="checkbox"></label><a></a></li> <li><div></div><label>James Williams<input type="checkbox"></label></li> <li><label>Barbara Williams<input type="checkbox"></label></li> </ul> </div> </div> <div data-role="popover" id="popover-location" data-popup='{"width": "20em"}'> <div data-role="view"> <ul data-role="listview" data-click="clickit"> <li><label>Sydney, Australia <input name="location" type="radio"></label></li> <li>New York, USA <input name="location" type="radio"></li> <li><input name="location" type="radio"><div>Test</div></li> </ul> </div> </div> <div data-role="footer"> <div data-role="navbar"> <a data-align="right" href="#popover-location" data-rel="popover" data-role="button">Location</a> </div> </div></div><script> function clickit(e) { console.log(e.item.find('input').prop('checked')); }</script><script> var app = new kendo.mobile.Application(document.body, { skin: "nova" });</script></body></html>Note the modified lines in the listviews where I remove labels in a few of them and in others I add random html tags before and after the </label>. It didn't matter if they were empty or had content in them.
I also tried modifying the 'checked="checked"' values via jQuery and also through data-binding with a ternary operator like one of your admins showed in this forum thread: http://www.telerik.com/forums/dynamically-creating-checkbox-listview-doesn-t-allow-selecting. While the value shows to be checked, and a $(elem).prop('checked') will return true/false correctly, the box doesn't show the checkbox when 'checked="checked"' is present in the input element (see the 'clickit' function and 2nd item of listview with checkboxes in the code snippet).
The thing that finally worked was to use jQuery to set the $(elem).prop('checked', true/false) ANDmanually add the classes I note were added automatically to inputs that 'work properly' : km-widget km-icon km-check. Note the very first listview item with checkboxes in the code snippet.
Now the question for staff: Why doesn't kendo automatically add these classes to listview inputs except in cases where it's <label>TEXT<input type="radio/checkbox" /></label> ? Is this a bug? Or if it's intended, why? In more complicated templates, such as the one in my code, it requires workarounds with setting the listview's data-click AND adding those three above classes to all my inputs if they're not exactly in a format that "works" (it also seems all kendo examples of inputs in listviews follow that exact formatting, which leads me to assume this issue is known...just uncommonly crossed upon by users). It's not a big deal once I figured it out, but the time spent wondering what was wrong and stepping through my code and all the possibilities was time consuming.
Or am I just doing things in the most horribly wrong way?
P.S. Out of curiosity, why was there a need to override/prevent the default behavior of the checkbox and radio inputs? Just for aesthetic purposes?
1 Answer, 1 is accepted
Thank you for sharing the code and the observations with the Kendo UI community.
Indeed the labels are required when using checkboxes.
This can be observed in our documentation in the styling section:
http://docs.telerik.com/kendo-ui/controls/hybrid/styles/forms#label-icons
Also, the following demo example is demonstrating the two different approaches for adding checkboxes and radio buttons:
http://demos.telerik.com/kendo-ui/m/index#mobile-forms/checkboxes
As for overriding the default behaviour, it was required, in order to achieve the consistent looks with the other Kendo UI widgets, and as well due to the mobile specifics.
Regards,
Stefan
Progress Telerik