This is a migrated thread and some comments may be shown as answers.

Zoomed Chart Pans with touch even if I mark all ManipulationEvents as "Handled"

4 Answers 15 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 2
Iron
Veteran
Iron
Joe asked on 12 Sep 2019, 09:55 PM

I need to be able to temporarily disable the panning and zooming of my RadCartesianChart but I cannot see how to do it.

I've got a plot of a profile that I want the user to be able to zoom horizontally and pan.  I accomplish this via a ChartPanAndZoomBehavior:

            <tk:RadCartesianChart.Behaviors>
                <tk:ChartPanAndZoomBehavior ZoomMode="Horizontal"
                                            PanMode="Horizontal"
                                            DragMode="Pan"
                                            />


This has been working fine for a while now.  I can pinch zoom as I want

But I also have some annotations on the chart that I needed to move with code-behind with Mouse and Touch Handlers, so I wrote handlers for MouseEvents (LeftButtonDown, MouseMove, LeftButtonUp) in which I handle moving my annotations.  It works fine.  In each handler, I mark the event as "Handled" to prevent it from bubbling up to the Chart.  

This also has been working fine for a while.  The user can drag the annotations and slide them across the profile and so the chart does not pan while I'm dragging my annotations, which is what I want.  For example,here's the MouseMove handler.

        private void RegionHandle_OnMouseMove(object sender, MouseEventArgs args)
        {
            if (!(sender          is CartesianCustomAnnotation   ann))
                return;

           if (!ann.IsMouseCaptured)
                return;

            // (Call my annotation manipulation code here...)

            args.Handled = true;  // Prevent chart from handling this.

      }


Unfortunately, I cannot achieve the same thing with touch handlers.  I wrote event handlers for ManipulationStarting, ManipulationStarted, ManipulationDelta and ManipulationCompleted.  In each one I mark the event as "Handled" but it doesn't matter.  The chart still pans while I am dragging my annotations.  It is very confusing.

        private void RegionHandle_OnManipulationDelta(object sender, ManipulationDeltaEventArgs e)
        {

            if (!(sender          is CartesianCustomAnnotation   ann))
                return;

            // (Call my annotation manipulation code here...)

            args.Handled = true;  // Prevent chart from handling this.

        }

It appears there is no such thing as PreviewXXXX events for Manipulation events so I cannot use that route to intercept the touch handlers.

My next attempt at a fix came when I saw that the ChartPanAndZoomBehavior is a Dependency object and its ZoomMode, PanMode, and DragMode properties are DependencyProperties.  So it should be valid to bind them to properties on my control and then just dynamically change them to ChartPanZoomMode.None and ChartDragMode.None in the handlers themselves, right?  Nope.  Does not work.  I get a runtime exception claiming that "ChartPanZoomMode.None is not a valid value for PanMode" (which makes no sense to me).

So how can I selectively prevent the chart from panning when I want?

 

So how can I prevent the chart from handling touch events when I want and enable it otherwise?
-Joe

(p.s.:  I cannot use your Format Code Block" functionality.  The editor window always appears at top of the web page and it is obscured by the banner on the page with the "Telerik" menu, "Get a Free Trial" button, etc.   I've tried this in two browsers, Edge and Chrome.  I'll attach an image to this post to show what I mean..)


4 Answers, 1 is accepted

Sort by
0
Vladimir Stoyanov
Telerik team
answered on 17 Sep 2019, 02:26 PM

Hello Joe,

Thank you for the provided information.

The RadCartesianChart utilizes the TouchManager events in order to implement the ChartPanAndZoomBehavior. With this information in mind, you should be able to handle the events it exposes in order to conditionally prevent touch interaction. Please, give this approach a try and let me know how it goes. 

On a side note, I have forwarded the format code editor problem to the responsible team. For the time being, you can try clicking inside the code editor and pasting the needed code there. 

Regards,
Vladimir Stoyanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Joe
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 20 Sep 2019, 04:44 PM

Hi Vladimir,

Thank you for the reply.  

In attempting to handle TouchManager events for the RadCartesianChart, should I attempt to focus on the simple Touch events or on the more complicated Gesture events?  Which set does the chart use?

-Joe


0
Accepted
Vladimir Stoyanov
Telerik team
answered on 24 Sep 2019, 12:52 PM

Hello Joe,

The ChartPanAndZoomBehavior uses the higher level gesture events, however they are all generated based on the basic touch events.

With this in mind, you can handle the TouchMove event in order to prevent the chart from panning and zooming. Do try this on your end and let me know how it goes.

Regards,
Vladimir Stoyanov
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Joe
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 01 Oct 2019, 04:00 PM
I was finally able to get back to this and try it out.   Simply marking any TouchMove as "Handled" during my annotation drag worked like a charm.   Thank you.
Tags
ChartView
Asked by
Joe
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Vladimir Stoyanov
Telerik team
Joe
Top achievements
Rank 2
Iron
Veteran
Iron
Share this question
or