Allow only horizontal moves on shapes

3 posts, 1 answers
  1. florian
    florian avatar
    15 posts
    Member since:
    Nov 2017

    Posted 18 Apr 2018 Link to this post

    Hello, 

    I would like to know if it's easily possible to allow only horizontal moves for all shapes in a radDiagram.

    I have tried to play with OnDrag event and I'm able to change the position of the shape at the end of the drag. But during the dragging, I don't know to lock the vertical position of the shape.

    I hope my explanations understandable, thanks in advance.

  2. Answer
    Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 18 Apr 2018 Link to this post

    Hello Florian,

    Thank you for writing.

    Yes, that would be possible and for the purpose, you will need to create a custom DraggingService to manage the special drag operation. The  implementation below introduces a new DragMode property with which you should be able to control whether the Drag operation will be performed in a horizontal, vertical or both directions: 
    public partial class Form1 : Form
    {
        private CustomDraggingService dragService;
       
        public Form1()
        {
            InitializeComponent();
       
            this.dragService = new CustomDraggingService(this.radDiagram1.DiagramElement) { DragMode = DragMode.Horizontal };
    this.radDiagram1.DiagramElement.ServiceLocator.Register<IDraggingService>(this.dragService);
            this.radButton1.Click += RadButton1_Click;
       
            //Setup diagram and add shapes
        }
       
        private void RadButton1_Click(object sender, EventArgs e)
        {
            this.dragService.DragMode = this.dragService.DragMode == DragMode.Horizontal ? DragMode.Vertical : DragMode.Horizontal;
        }
    }
       
    public class CustomDraggingService : DraggingService
    {
        private Telerik.Windows.Diagrams.Core.Point startDragPoint;
        private DragMode dragMode = DragMode.Both;
       
        public CustomDraggingService(IGraphInternal graph)
            : base(graph)
        { }
       
        public DragMode DragMode
        {
            get
            {
                return this.dragMode;
            }
            set
            {
                this.dragMode = value;
            }
        }
       
        public override void InitializeDrag(Telerik.Windows.Diagrams.Core.Point point)
        {
            this.startDragPoint = point;
       
            base.InitializeDrag(point);
        }
       
        public override void Drag(Telerik.Windows.Diagrams.Core.Point newPoint)
        {
            Telerik.Windows.Diagrams.Core.Point dragPoint = newPoint;
            if (this.DragMode == DragMode.Horizontal)
            {
                dragPoint = new Telerik.Windows.Diagrams.Core.Point(newPoint.X, this.startDragPoint.Y);
            }
            else if (this.DragMode == DragMode.Vertical)
            {
                dragPoint = new Telerik.Windows.Diagrams.Core.Point(this.startDragPoint.X, newPoint.Y);
            }
       
            base.Drag(dragPoint);
        }
    }
       
    public enum DragMode
    {
        Both,
        Horizontal,
        Vertical,
    }

    I am also attaching a short video showing the result on my end.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements. 
  3. florian
    florian avatar
    15 posts
    Member since:
    Nov 2017

    Posted 18 Apr 2018 Link to this post

    It works perfectly, thanks for your help
Back to Top