Pinch & Zoom

[pete]

I'm playing/learning Icenium using the examples.

I've read somewhere that Kendo UI Mobile on Icenium does not support Pinch & Zoom or at least disables it.

Can I get pinch and zoom to work using Jquery Mobile and Icenium?

I've tried adding the meta tag and a snippet of javascript:
    $(document).bind('mobileinit', function() {
        $.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2, user-scalable=yes';
        $.extend($.mobile.zoom, {locked:false,enabled:true});
    });

[Jordan]

Hello Pete,

In fact Kendo UI Mobile supports Pinch & Zoom as shown in their demo pages,

as for jQuery Mobile you can try this, and see if it is what you looking for.

Regards,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[pete]

Hi Jordan,

should both of these work in Ion on an iPhone?

Regards

Pete

[Jordan]

Hi,

yes no reason why not.

You may need to replace Kendo Mobile with more recent version from here.

Kind regards,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[pete]

Hi Jordan.

Am I losing the plot here? I'm using Icenium, why do I need to download anything at all? It's supposed to be a hosted build solution, nothing to download, nothing to install, it just works :)

Does Pinch & Zoom work for you on the Icenium examples on Ion?

Regards

Pete

[Jordan]

Hello,

Your absolutely right, in most cases it should work right out of the box as we update Icenium project templates to the latest Kendo UI Mobile version available at a time of each release.

But this is not the case with Punch and Zoom demo as it uses the latest Kendo Mobile UI version (from Nov 14, 2012 :)

To help you start with Pinch and Zoom I just created a working sample app you can Clone from here:

https://github.com/Icenium/sample-pinch-and-zoom.git

Greetings,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[pete]

Hi Jordan,

thanks for the example, If I could convince Ion to install any application other than the one it has installed I may get to see if Pinch and Zoom works.

I'm off to un-install Ion on my iPhone again and then ..... scream!

[pete]

Hi Jordan,

I created a new project instead which had the great effect of kick starting Ion back into action.

I've copied the later release of Kendo ui and added data-zoom="true" to the divs.

It works perfectly, thank you.

[pete]

Hi Jordan,

I've just got a Nexus 10 and the zoom works great but pinch is very erratic.

Is there a way in javascript to reset the zoom level?

Regards

Pete

[Jordan]

Hello Pete,

 just spoke with Kendo Team and they suggested to use this:

app.scroller().scrollElement.css("-webkit-transform", "");

Where app is your Kendo Mobile application.

As about performance with Nexus 10 and pinch you can try this:

Got to Android Settings > Developer options > Force GPU rendering and enable this option
Then kill the app and try again.

Regards,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[Jan-Dirk]

When will this (Kendo UI Q3) be incorporated in Icenium when creating new project?

[Jordan]

@Jan-Dirk we are updating Icenium templates to latest Kendo UI Mobile and jQuery mobile versions if they pass some basic  tests so expect it with next Icenium release.

Note that as general rule existing project do not get auto updated as this can bring unexpected compatibility issues with user code.
If you need to upgrade any JavaScript library right now do so at any time nothing bounds you with particular Icenium release.

If you wish you can create feature request so our team will bring some smart solution for this scenario if there is high demand about it.
 
All the best,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[pete]

Hi Jordan,

This works perfectly to reset the screen:
app.scroller().scrollElement.css("-webkit-transform", "");

But I still have an issue with Pinch, I'll ignore it for now and see if the problem goes away when Google finish 4.2 :)

[Jordan]

Hello,

I guess "Android Settings > Developer options > Force GPU rendering" did't fixed it?

I asked Kendo Team about that too, but they were not aware of it or the solution for it, also do not have the device to test on yet so may take awhile to investigate.

All the best,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[pete]

Hi Jordan,

No, "Android Settings > Developer options > Force GPU rendering" didn't fix it.

Though, as I hinted before, Android 4.2 has a very unfinished feel about it, so I'll wait to see what happens.

Thanks for your help.

Pete

[N Mackay]

Hi Jordan,

I added data-zoom="true" to the views and compiled with Icenium to Android with Kendo Mobile build 2012.3.1114 (commercial release).

I tested on an Android Desire HD running 2.3.5 and it doesn't seem to have any effect.

I'm surprised this is added as it wasn't really mentioned in the release notes.

http://www.kendoui.com/mobile/whats-new/release-notes/q3-2012-version-2012-3-1114-0-0.aspx

[Jordan]

Hello Norman,

Regarding ANDROID 2.3.* Gingerbread  (Nexus One and Nexus S), there is no multi-touch support in browser engine. This is a known android issue.

And there is not much Kendo team or Icenium team can do much about :( it worked in 2.2 and again in 3.0+

Kind regards,
Jordan
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[N Mackay]

Thanks Jordan.

I was just using my own phone for testing rather than our test units, HTC stopped supporting it so no updates. Thankfully my contract is up next month.

I'll test on our iPhone handsets.

Thanks for letting me know,
Norman.

[John Wahlen]

So I upgrade the Kendo UI Mobile to the latest and Pinch and Zoom works but now my listview buttons  fail to fire onclick events.  I've tried to use data-click but that fires every record when loaded.  Here is the template code I have for it: 

<script type="text/x-kendo-template" id="listviewHeadersTemplate">
#if (data.EventTitle != 'TBA') {#               
<div id="leftPanel">
#if (data.MySchedule == 'true') {#
<button id="ArtistPageButton"  onclick="RemoveEvent('${EventId}')">
<img src="Resources/ScheduleAdded.png" />
</button>
#}
else {#
<button  id="ArtistPageButton" onclick="AddEvent('${EventId}')">
<img src="Resources/ScheduleAddTo.png" />
</button>
#}#
</div>
<div id="rightPanel" data-role="content" onclick=" ArtistPageClick('${artistId}') ">
<div class="item-EventTitle">
${EventTitle}
</div>
<div class="item">
<!--${EventDateStr} - -->${EventStartTime} &middot;
${LocationShortName}
</div>
#}
else {#
<div id="leftPanel" class="schedule-TBA"></div>
<div id="rightPanel" class="schedule-TBA">
<div class="item-EventTitle">
${EventTitle}
</div>
<div class="item">
<!--${EventDateStr} - -->${EventStartTime} &middot;
${LocationShortName}
</div>
</div>
#}#
</script>

[Steve]

Hi John,

This should be working if you upgrade to the latest beta of KendoUI (in general custom upgrades of Kendo are only required in case fixes are released as part of unofficial releases, otherwise Icenium is continually upgraded with Kendo's latest stuff).
Still, the recommended approach in this case would be to use the listview click event to handle clicks of items in listview.

Kind regards,
Steve
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[syed]

Hey Jordan,
Is there a problem with data-stretch="true" and data-zoom="true" co-existing for a div whose data-role="view"?

[Steve]

Hello Syed,

Setting 'data-stretch=true' would disable the view scrolling and zooming as the view occupies the whole screen and this behavior is by design.

Regards,
Steve
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.