Gridlines in ASP.NET CORE Diagram Component

4 Dec 202420 minutes to read

Gridlines are the pattern of lines drawn behind the diagram elements. It provides a visual guidance while dragging or arranging the objects on the diagram surface.

The model’s snapSettings property is used to customize the gridlines and control the snapping behavior in the diagram.

Customize the gridlines visibility

The snapSettings.snapConstraints enables you to show or hide the gridlines.

If you need to enable snapping, then inject snapping module into the diagram.

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-snapsettings constraints="ShowLines"></e-diagram-snapsettings>
</ejs-diagram>
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;
    }
}

To show only horizontal or vertical gridlines or to hide gridlines, refer to Constraints.

Appearance

The appearance of the gridlines can be customized by using a set of predefined properties.

  • The horizontalGridLines and the verticalGridLines properties allows to customize the appearance of the horizontal and vertical gridlines respectively.

  • The horizontal gridlines lineColor and lineDashArray properties are used to customize the line color and line style of the horizontal gridlines.

  • The vertical gridlines lineColor and lineDashArray properties are used to customize the line color and line style of the vertical gridlines.

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-snapsettings constraints="ShowLines" horizontalGridlines="ViewBag.gridLines" verticalGridlines="ViewBag.gridLines"></e-diagram-snapsettings>
</ejs-diagram>
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;
            DiagramGridlines gridLines = new DiagramGridlines() {
                LineColor = "#e0e0e0", LineDashArray = "2,2"
            };
            ViewBag.gridLines = gridLines;


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

Line intervals

Thickness and the space between gridlines can be customized by using horizontal gridlines’s linesInterval and vertical gridlines’s linesInterval properties. In the lines interval collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines.

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-snapsettings constraints="ShowLines" horizontalGridlines="ViewBag.gridLines" verticalGridlines="ViewBag.gridLines"></e-diagram-snapsettings>
</ejs-diagram>
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;
            double[] intervals = { 1, 9, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75, 0.25, 9.75 };
            DiagramGridlines gridLines = new DiagramGridlines() {
                LineColor = "#e0e0e0", LineIntervals = intervals, LineDashArray = "2,2"
            };
            ViewBag.gridLines = gridLines;


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

Snapping

Snap to lines

This feature allows the diagram objects to snap to the nearest intersection of gridlines while being dragged or resized. This feature enables easier alignment during layout or design.

Snapping to gridlines can be enabled or disabled with the snapSettings.snapConstraints.

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-snapsettings constraints="SnapToLines"></e-diagram-snapsettings>
</ejs-diagram>
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"
                    },
                    OffsetX = 100,
                    OffsetY = 100,
            });
            ViewBag.nodes = nodes;


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

Customization of snap intervals

By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s snapInterval and the vertical gridlines’s snapInterval properties.

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-snapsettings constraints="ShowLines" horizontalGridlines="ViewBag.gridLines" verticalGridlines="ViewBag.gridLines"></e-diagram-snapsettings>
</ejs-diagram>
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;
            double[] snap = { 10 };
            DiagramGridlines gridLines = new DiagramGridlines() {
                 SnapIntervals = snap
            };
            ViewBag.gridLines = gridLines;


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

Snap to objects

The snap to object provides visual cues to assist with aligning and spacing diagram elements. A node can be snapped with its neighbouring objects based on certain alignments. Such alignments are visually represented as smart guides.

The snapObjectDistance property allows to define minimum distance between the selected object and the nearest object.

The snapAngle property allows to define the snap angle by which the object needs to be rotated.

The snapConstraints property allows to enable or disable the certain features of the snapping, refer to snapConstraints.

The snapLineColor property allows to define the color of the snapline.

<ejs-diagram id="container" width="100%" height="700px" nodes="@ViewBag.nodes">
<e-diagram-snapsettings constraints="ShowLines" snapAngle="10" snapObjectDistance="10"></e-diagram-snapsettings>
</ejs-diagram>
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;
    }
}