Canvas borders to indicate rows and colums

GoJS
1

Hello

I’m trying to build a canvas type, which is similar to Microsoft Excel, in the sense that I want to have borders, which indicate where the rows and columns for the whole canvas are.

Is this possible with GoJS?

Thanks!

2

There are several interpretations for your request.

I should mention first that there are no rows or columns inherent in a GoJS diagram.

You can easily specify a border around the HTML DIV element via the normal styling properties.

Regarding the contents of the diagram, in my experience the user can scroll down in a spreadsheet indefinitely and everything continues to look the same except that the row numbers increase. You can enable infinite scrolling by setting Diagram | GoJS API. For a demo: Scroll Modes GoJS Sample

But maybe you want to to draw a box around the Diagram.documentBounds, or maybe change the background color there (GoJS Coordinate Systems-- Northwoods Software). This is quite feasible, although it probably requires implementing a “DocumentBoundsChanged” DiagramEvent listener, DiagramEvent | GoJS API. I would probably create an unmodeled Part in the “Grid” Layer and update its position and size in the “DocumentBoundsChanged” listener.

3

As an example of the technique you could use to implement the third choice in my previous message, just showing a background color:

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          . . .,
          "DocumentBoundsChanged": function(e) {
            e.diagram.add(myBack);  // no-op if already in Diagram
            myBack.position = e.diagram.documentBounds.position;
            myBack.desiredSize = e.diagram.documentBounds.size;
          },
          . . .
        });

    var myBack =
      $(go.Part,
        {
          layerName: "Grid", // automatically makes this Part not selectable or pickable
          background: "lightyellow"
          // will be given position and desiredSize in "DocumentBoundsChanged" listener
        });
    myDiagram.add(myBack);  // initializing the background Part

Alternatively, if you really want a border, you’ll need to use a Shape in that background Part. You can also get a background color by setting Shape.fill:

    myDiagram =
      $(go.Diagram, "myDiagram",  // create a Diagram for the DIV HTML element
        {
         . . .,
          "DocumentBoundsChanged": function(e) {
            myBack.position = e.diagram.documentBounds.position;
            myBack.elt(0).desiredSize = e.diagram.documentBounds.size;
          },
          . . .
        });

    var myBack =
      $(go.Part,
        { layerName: "Grid" },// automatically makes this Part not selectable or pickable
        $(go.Shape, { fill: "lightyellow" })
      );
    myDiagram.add(myBack);