Canvas borders to indicate rows and colums

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!

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 http://gojs.net/latest/api/symbols/Diagram.html#scrollMode. For a demo: http://gojs.net/latest/samples/scrollModes.html

But maybe you want to to draw a box around the Diagram.documentBounds, or maybe change the background color there (http://gojs.net/latest/intro/viewport.html). This is quite feasible, although it probably requires implementing a “DocumentBoundsChanged” DiagramEvent listener, http://gojs.net/latest/api/symbols/DiagramEvent.html. I would probably create an unmodeled Part in the “Grid” Layer and update its position and size in the “DocumentBoundsChanged” listener.

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);