Chart tooltip not presented on mobile device

[Ron]

Hello,

We are using Kendo UI Q2 2016 and added tooltips to our grouped bar chart.
When working in Chrome on the desktop it all works well and the tooltips are shown upon mouse over correctly.
However when we run the same app on a mobile device (specifically - iPhone 6s device and iPhone 5s simulator) the tooltips are not showing in the app.
On the same devices in which we experienced the problem we also checked the tooltips of your demo in Safari and they worked well: http://demos.telerik.com/kendo-ui/bar-charts/index

In addition we found out that if we add the following seriesClick, the tooltips do show up (after the alert is presented):
seriesClick : function(e){alert("nothing");}

Following this strange behavior of alert solving the problem, we  tried the following in the seriesClick function instead of the alert:
e.preventDefault() as well as e.originalEvent.preventDefault();
None helped and it looks like tooltips will only show up after alert.

Any idea how we can solve this issue with the tooltips not showing up (without alert)?

Thanks,

 

Ron.

[Daniel]

Hello Ron,

I am not sure what could be causing the problem and I couldn't replicate it when I tested with the specified devices. I am not sure if I understand from the description, can the problem be reproduced in our demos on any of the devices that you have tested? If not, then could you provide a runnable sample that demonstrates the problem or at least the code that you are using so I can check the exact setup? Also, are you using the latest version?


Regards,
Daniel
Telerik

 

 

[Ron]

Thanks Daniel,

We created the following Dojo:
http://dojo.telerik.com/usOCI/4

When we test this on iOS (safari) or Android (Chrome) it works well (as we wrote at the problem description - there is no issue when running inside browser).

The problem is that when we run our app, built using latest Cordova, on iOS device (such as iPhone 6s). For some reason, while the tooltips work correctly on Android, they do not appear on the iOS device. Any suggestion?

Regards,

Ron.

[Daniel]

Hello again Ron,

Unfortunately I am still not able to replicate the problem. I included the provided chart in a cordova app and tested in on  iPhone 5s but the tooltips were shown correctly. Is there anything else specific about the app? Also, which version of IOS are you using?

The alert fixing the problem indicates that it is a timing issue but without replicating the problem locally we cannot be certain what could cause it.

Regards,
Daniel
Telerik

 

 

[Ron]

Daniel, Thanks.

 

We tested it on iPhone 6s with iOS 9.3.1

 

If you used a different version - please tell us and we will try it with it as well and see if the problem still persists.

 

Ron

[Daniel]

Hello,

I was testing with the same version. Unfortunately I am out of ideas. Could you check if the problem occurs if you leave only the chart and the kendo scripts and styles on the page? Perhaps some other scripts or styles are preventing the chart from correctly handling the touch events.

Regards,
Daniel
Telerik

 

 

[Ron]

Hello Daniel and thanks for your help - we really appreciate it.

Your suggestion led us to find the cause to the problem - one we comment out the use of FastClick the tooltips show correctly on  our iPhone device.

Our current code has a lot of onclick events which were handled well by FastClick (without FastClick our UX felt lethargic and slow because of the click delay). We consulted the Kendo Touch documentation at http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/touch and Because of this problem we tried to disable FastClick and replace each
...onclick="app.navigate('view1')"...

with

data-role="touch" data-tap="handleTap"

In the basic tests we did we found it does not work well. Specifically we have cases in which tap event is handled quickly as it should without the delay we saw with click events, but now the tap event is also executed in the new view we switched to (it propagates to the new view). 

So it looks like we have the following options:
- Try to find a newer version of FastClick and hope it works well with Kendo
- Find out how to correctly use kendo touch instead of all the onclick attributes we currently have.

If suggesting to switch to kendo touch events:
- What is the right way to convert each onclick attribute we currently have in the various HTML elements?
- Why do we experience this tap event propagation - and how to stop it?

Thanks,

 

Ron.

[Ron]

BTW, We decided not to try event.stopPropagation() or preventDefault() in the touch events because there was no mention of them in the documentation - but if you think this would help - we can give this is a try (even tho it will require a lot of changes).

[Daniel]

Hello Ron,

Thank you for checking. Fastclick is indeed not compatible with Kendo. One option that I have found to work for the chart is to switch to canvas rendering and add the needsclick class in the render event:

renderAs: "canvas",
render: function () {
    this.element.find("*").addClass("needsclick");
}

but since you will probably encounter other issues with the other kendo widgets I would suggest to switch to the kendo touch events.

As for the issue with the tap event propagation - are you using the kendo tap event in both views? If yes and the other view also captures the event, then could you try using transitions for the views?


Regards,
Daniel
Telerik

 

 

[Ron]

Daniel,

 

Thanks. We are going to try and replace all click events with tap events to see if this solves the problem.

 

However, to do that, we need to know how to unbind touch events created with $(...).kendoTouch(...) at times to replace them with another event the way we do an unbind on click events at times.

 

Is there any documentation how to do that?

 

Thanks,

Ron.

[Daniel]

Hello,

The events are bound via jQuery so you can use the off method. The other option should be to destroy the widget but this does not seem be working currently(logged an issue here).

Regards,
Daniel
Telerik

 

 

[Ron]

Daniel,

 

Thanks, I am not sure however what we need to pass to the off() function in this case - since we are attaching them via the .kendoTouch() method. 

 

Assume that I have a <li> item that I earlier bound with:

 

$("#myitem").kendoTouch(...)

 

How do I unbind of off this item?  What are the event names I pass to off()?

 

(In theory, if I knew that, I could have just done it with unbind as well...)

[Ron]

Just to clarify - I want to know how I remove the tap events - do I need to do something like

 

$("#myitem").off('touch')

 

or

 

$("#myitem").off('tap')

 

or anything else.

 

Thanks,

Ron.

[Daniel]

Hello Ron,

Perhaps I misunderstood the question. Do you wish to unbind the tap handler bound to the widget? If yes, then you can use its unbind method:

$("#myitem").getKendoTouch().unbind("tap");

If you wish to unbind the events bound to the element by the widget then you can call off without parameters and it will unbind all event handlers:

$("#myitem").off();

If you have other event handlers that should not be unbound then until the issue with the destroy method is fixed I can suggest to call the events destroy method:

$("#myitem").getKendoTouch().events.destroy()

Regards,
Daniel
Telerik

 

 

[Ron]

Thanks Daniel,

We appreciate your assistance as we put more and more effort in switching from our existing use of click events to kendo touch following your suggestion (already spent several days on the issue hoping eventually it will pay off :)

The $("#myitem").getKendoTouch().unbind("tap") gave us the answer :-)

We now have 2 problems:
1) On the first screen we now have a button properly binded with kendo touch event, which leads to a second view. In the second view, exactly at the position of the button of the first view, we have a date input box. Tapping the button of the first view on iPhone device  not only leads to the second view (as expected) it also set focus on the date input and as a result the dates picker shows up when the user not intended it to appear. We made sure there is nothing binded to the date input (no click or anything else). Is there anything we need to do to prevent the tap on the first view propagating to input fields of the second view? Will something like preventDefault work here?

2) Xcode console shows us a message we never saw before:
 *** WebKit discarded an uncaught exception in the webView:willRemoveScrollingLayer:withContentsLayer:forNode: delegate: <NSInvalidArgumentException> -[WebActionDisablingCALayerDelegate willBeRemoved]: unrecognized selector sent to instance 0x147627c20
Should we be concerned because of this Xcode error message? (we could not find anything about this error in kendo's forum)

Regards,

 

Ron.

[T. Tsonev]

Hi,

I don't think we've ever seen such problem before. Presumingly the touch is being registered as a new one in the second view.

Try adding a small delay or displaying a loading overlay to see if that would be enough to prevent the tap from being registered twice.

I hope this helps.

Regards,
T. Tsonev
Telerik

 

 

[Ron]

Hi T. Tsonev,

We had two questions in the previous thread.



About item 1 to which your answer referred - it turns out the e.preventDefault() does solve the problem and once we implement it the problem is gone. Our main concern about it is whether we should now add e.preventDefault() at the end of all of the tap functions - we have over 100 such functions and we look for the best solution. Should we go over each one of the tap functions and add e.preventDefault() at its end or is there a better, more elegant solution?

In addition - can you please advise about item (2) of the previous thread concerning the "unrecognized selector sent to instance" Xcode message?

Thanks,

 

Ron.

[Ron]

Hi T. Tsonev,

We had two questions in the previous thread.



About item 1 to which your answer referred - it turns out the e.preventDefault() does solve the problem and once we implement it the problem is gone. Our main concern about it is whether we should now add e.preventDefault() at the end of all of the tap functions - we have over 100 such functions and we look for the best solution. Should we go over each one of the tap functions and add e.preventDefault() at its end or is there a better, more elegant solution?

In addition - can you please advise about item (2) of the previous thread concerning the "unrecognized selector sent to instance" Xcode message?

Thanks,

 

Ron.

[Petyo]

Hello,

The problem you face is a known one - check this thread. there is no universal solution that we are aware of.  Feel free to use what works for you.

We are not aware of the origin or cause of the second error. Most likely you will find further details in the Cordova public forums. 

I would also like to ask you to open new threads for any new additional questions you may have. Thank you in advance.

Regards,
Petyo
Telerik