Scroll Settings in Diagram

4 Dec 202422 minutes to read

The diagram can be scrolled by using the vertical and horizontal scrollbars. In addition to the scrollbars, mousewheel can be used to scroll the diagram. Diagram’s scrollSettings enables to read the current scroll status, view port size, current zoom, and zoom factor. It also allows to scroll the diagram programmatically.

Get current scroll status

Scroll settings allows to read the scroll status, viewPortWidth, viewPortHeight, and currentZoom with a set of properties. To explore those properties, see Scroll Settings.

Define scroll status

Diagram allows to pan the diagram before loading, so that any desired region of a large diagram is made to view. You can programmatically pan the diagram with the horizontalOffset and verticalOffset properties of scroll settings.

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        @Html.EJS().Diagram("diagram").Width("100%").Height("590px").GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Infinity))
        .scrollsettings(se => se.horizontalOffset("100").verticalOffset("50"))).Render()
    </div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        Fill = "#6BA5D7",
                            StrokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
            });
            ViewBag.nodes = nodes;


            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

Update scroll status

You can programmatically change the scroll offsets at runtime by using the client-side method update.

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        @Html.EJS().Diagram("diagram").Width("100%").Height("590px").GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Infinity))
        ).Render()
    </div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        Fill = "#6BA5D7",
                            StrokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
            });
            ViewBag.nodes = nodes;


            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}
var diagram = document.getElementById("container").ej2_instances[0];
//Updates scroll settings
diagram.scrollSettings.horizontalOffset=200;
diagram.scrollSettings.verticalOffset=30
diagram.dataBind();

AutoScroll

Autoscroll feature automatically scrolls the diagram, whenever the node or connector is moved beyond the boundary of the diagram. So that, it is always visible during dragging, resizing, and multiple selection operations. Autoscroll is automatically triggered when any one of the following is done towards the edges of the diagram.

  • Node dragging, resizing
  • Connection editing
  • Rubber band selection
  • Label dragging

The diagram client-side event ScrollChange gets triggered when the autoscroll (scrollbars) is changed and you can do your own customization in this event.

The autoscroll behavior in your diagram can be enabled or disabled by using the canAutoScroll property of the diagram.

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        @Html.EJS().Diagram("diagram").Width("100%").Height("590px").Nodes(ViewBag.nodes.margin)GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Infinity))
        .scrollsettings(se => se.autoScrollBorder("Infinity"))).Render()
    </div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        Fill = "#6BA5D7",
                            StrokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
            });
            ViewBag.nodes = nodes;


            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

Autoscroll border

The autoscroll border is used to specify the maximum distance between the object and diagram edge to trigger autoscroll. The default value is set as 15 for all sides (left, right, top, and bottom) and it can be changed by using the autoScrollBorder property of page settings.

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        @Html.EJS().Diagram("diagram").Width("100%").Height("590px").Nodes(ViewBag.nodes.margin)GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Infinity))
        .scrollsettings(se => se.autoScrollBorder("Infinity"))).Render()
    </div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        Fill = "#6BA5D7",
                            StrokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
            });
            ViewBag.nodes = nodes;
            List<DiagramMargin> margin = new List<DiagramMargin>();
            margin.Add(new DiagramMargin() { Left = 100, Right = 100, Top = 100, Bottom = 100 });
            ViewBag.margin = margin;


            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

Controlling Autoscroll Speed

You can control how often the scrolling needs to be performed automatically in the Diagram component during the auto-scrolling behavior. You can now adjust the frequency, ranging from slow and smooth to quick and rapid, to suit their preferences. To configure, set the value in milliseconds to the autoScrollFrequency property within the scrollSettings class, allowing precise control over how often auto-scrolling occurs.

AutoscrollFrequency

Scroll limit

The scroll limit allows to define the scrollable region of the diagram. It includes the following options:

  • Allows to scroll in all directions without any restriction.
  • Allows to scroll within the diagram content.
  • Allows to scroll within the specified scrollable area.
  • The scrollLimit property of scroll settings helps to limit the scrolling.

The scrollSettings scrollableArea allows to extend the scrollable region that is based on the scroll limit.

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        @Html.EJS().Diagram("diagram").Width("100%").Height("590px").Nodes(ViewBag.nodes.margin)GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Infinity))
        .scrollsettings(se => se.autoScrollBorder("Infinity"))).Render()
    </div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        Fill = "#6BA5D7",
                            StrokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
            });
            ViewBag.nodes = nodes;


            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

Scroll padding

The scroll padding allows to extend the scrollable region that is based on the scroll limit.

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        @Html.EJS().Diagram("diagram").Width("100%").Height("590px").Nodes(ViewBag.nodes.margin)GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.Padding(new DiagramMargin() { Right = 50, Bottom = 50})).Render()
    </div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            nodes.Add(new Node() {
                Id = "node1",                   
                    text = "node1",
                    Offset =0,
                    side = "Right",
            });
            ViewBag.nodes = nodes;


            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

Scrollable Area

Scrolling beyond any particular rectangular area can be restricted by using the scrollableArea property of scroll settings. To restrict scrolling beyond any custom region, set the scrollLimit as “limited”.

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        @Html.EJS().Diagram("diagram").Width("100%").Height("590px").GetNodeDefaults("getNodeDefaults").GetConnectorDefaults("getConnectorDefaults").ScrollSettings(s => s.ScrollLimit(Syncfusion.EJ2.Diagrams.ScrollLimit.Infinity))
        .scrollsettings(se => se.scrollLimit("Infinity"))).Render()
    </div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;

namespace EJ2MVCSampleBrowser.Controllers.Diagram {
    public partial class DiagramController: Controller {
        // GET: Nodes
        public ActionResult Nodes() {
            List < DiagramNode > nodes = new List < DiagramNode > ();
            nodes.Add(new Node() {
                Id = "node1",
                    Width = 100,
                    Height = 100,
                    Style = new NodeStyleNodes() {
                        Fill = "#6BA5D7",
                            StrokeColor = "White"
                    },
                    text = "node1",
                    OffsetX = 100,
                    OffsetY = 100,
            });
            ViewBag.nodes = nodes;


            return View();
        }
    }
    public class Node: DiagramNode {
        public string text;
    }
}

UpdateViewport

The updateViewPort method is used to update the diagram page and view size at runtime.