mobile listview become unclickable if grouped listview has template with <a href=""> + switch

[Oleksii]

Hi all,
I just new in kendo ui and you may consider my question silly, but still I need to get an answer.

All code is available here: http://jsfiddle.net/Oleksii/vvCHX/27/

In my scenario I have mobile application with 2 views:

• defaultView (id="") contains 2 list view: one statically defined; the second one is initialized in view init event handler); This non-static listview has template called "fileGroupsItemTemplate".
• second view has no content (id="aboutView").

Non-static view's item MUST:

1. be clickable (I mean Link Items) to get ability to navigate to other view;
2. have switch on the right side in every row
3. View MUST be chnaged only if switch is checked

I faced with the problems: if I click on switch it changes its value, but current view is changed too.

It is because switch is inside <a> tag (see template). But if I put it out of <a> tag, 1) items are shown as a link; 2) items become unclickable; 3) if I click the link, then will get an error:

{"error": "Please use POST request"}

Doew anyone know how to prevent changing view after clicking on switch inside <a> tag? I was thinking about some trick in event handlers, but item-click event of list view is raised in the first place, and switch-change just after.

Here is template:

<script id="fileGroupsItemTemplate" type="text/x-kendo-template">

    <table>

        <tr><td>

            <img src="#= data.Image#" />

        </td><td style="vertical-align: middle">

            #= data.Name #

        </td>

        </tr>

    </table>

    #if(data.Docs.length > 0){#

    <ul>

        #for(var i=0; i < data.Docs.length; i++){#

        <li>

            <a >#=data.Docs[i].Name#

            <input data-on-label="Cl" data-off-label="Sk" data-role="switch" #=data.Docs[i].NeedProcess ? "checked='checked'" : ""# /></a>

             

        </li>

        #}#

    </ul>

    #}#

</script>

[Alexander Valchev]

Hi Oleksii,

Can you reproduce the same behaviour on a mobile device? I tested your fiddle on iPhone 4S and got it working as expected - if the user changes the switch button the View is not changed.

Actually on a desktop the problem appears because the mouse is moved out of the switch element bounds.

Regards,
Alexander Valchev
the Telerik team

[Oleksii]

Hi Alexander,

Please see the latest fiddle http://jsfiddle.net/Oleksii/vvCHX/29/. SWITCH input was placed into <a> tag to make whole row (item) clickable (not only item text). If you change switch state, current view is also changed.

I tried this fiddle on iPod Touch, and get the same result.

View does not changed if you use DRAGGING, but if I want to change switch state by clicking it, then view is also changed.

Thanks,
Oleksii

[Alexander Valchev]

Hi Oleksii,

I apologize for the misunderstanding. You are right, if the user taps/clicks on the switch widget the View changes. We do not support this scenario because it uses invalid mark-up - nesting input element inside <a> tag is not a valid html. You can verify it here.

This is partially working while dragging because in this case the redirect action of the ListView is prevented.
Please accept my apology for the inconvenience caused.

Regards,
Alexander Valchev
the Telerik team

[Oleksii]

Thanks a lot, Alexander, for a quick reply.

I do need to place input tah inside a tag. If i place it after (as detailbutton) then only text become clickable (and it looks like a link), but not whole item (even item effects are not applied, I mean changing color as a result of mousedown and up events).

May be you can suggest, how to achieve this.

I achieved needed behaviour by specifying data-click attribute of a listview and preventing default event if (But input is in a tag):

s.target.prop("tagName") != "A"

Oleksii

[Alexander Valchev]

Hello Oleksii,

We do not support scenarios that contain invalid HTML because it is unclear how the application will behave under various platforms and browsers.

Kind regards,
Alexander Valchev
the Telerik team