Simple application seems very slow on iPad

[Alex Smith]

We are exploring using Kendo Mobile to deliver a mobile application with the iPad as our initial target. I've put together a simple application and it seems to be "clunky" and slow when rendered in Safari on the iPad.

Attached is the simple application.
My complaints/questions are as follows:
* It takes the better part of one second to respond to a click of a 'person' element and to add the form for that person to the 'selected' list. What makes this operation take so long?
* When selecting a location from the dropdown for a user, why does the selection of a location take so long. Again it seems to take almost a second to respond.
* I am unable to do the following for the checkboxes for the people items and I don't understand why: 

<input type="checkbox" data-bind="checked: selected, events: { click: selectPerson }"/>

When configured this way, I get the data-binding but the selectPerson event on the view-model is not triggered. I believe lack of value binding combined with my implementation of the selectPerson method leads to an issue with the list of selected people getting out of sync with the checkboxes after you change a person's location.

Fundamentally I am curious if there is some inefficiency in this test app, or if it is demonstrative of the performance and feel we can expect using kendo mobile.

specs:
jquery v.1.10.2 (have tried bundled version of jQuery as well)
kendo v. 2013.2.918
iOS 7.0.2

Thanks!

[Alexander Valchev]

Hi Alex,

I believe that the problem comes from the fact that your application uses HTML elements and Web widgets which are not optimized. Both the labels + checkboxes and the dropdownlist widget are using 'click' event which is why the responsiveness is slower than expected. On mobile devices, the click event fires with about 300ms delay, which is the reason for the behavior that you described.

Normally kendo mobile widgets listen for the touch events which are not triggered with delay, but I am afraid that we cannot suggest a workaround for the checkboxes or the dropdownlist.

On a side note, one of the templates which you use contains a table with DropDownList. Having too many DropDownLists on the same page may slow the general performance of the application as well.

Regarding events binding, I would not recommend binding to the click event due to the reasons mentioned above. You may use the change event instead.

<input type="checkbox" data-bind="checked: selected, events: { change: selectPerson }"/>

Regards,
Alexander Valchev
Telerik