How to display more than 1 diagram?

GoJS
1

We have MVC application and want to display more than 1 diagram. But, it seems the diagram must use “myDiagramDiv” element. When I tried to display more diagrams in “myDiagramDiv1”, “myDiagramDiv2”, etc. only was displayed diagram in “myDiagramDiv” element. What should I do to display more diagrams?

2

Did you want to display more than one diagram at a time? Then you’ll need separate HTML DIV elements, each of which would hold a Diagram that you create and initialize. See for example any sample that uses a Palette. Or Two Diagrams.

Or did you want to display them one at a time? Then you could reuse the same HTML DIV element. See for example any sample that has a “Load” button.

3

I have different diagrams in different JS files. When I click on some NavBar (DevExpress control) item I want to display different diagrams on separate pages. And I have separate and different DIVs. But, only one diagram is displayed - the one that uses “myDiagramDiv” element. I’m not sure what’s going on.

4

If the HTML DIV elements really are in separate pages (or iframes), then they are separate apps, so if each DIV has id: "myDiagramDiv", that would be OK.

You can also pass a reference to the DIV element directly to the Diagram constructor or go.GraphObject.make or Diagram.div property, so that you do not need to be dependent on HTML DOM identifiers.

5

I have separate pages with the same DIV element “myDiagramDiv” and only one diagram is displayed instead of more different diagrams.

6

It looks as following:

  1. First JS:

    function initDataBinding() {
    jQuery.ajax({
    type: “GET”,
    url: ‘/Home/GetDiagramData’
    }).done(function (data) {
    var $ = go.GraphObject.make; // for conciseness in defining templates

         var diagram =
         $(go.Diagram, "myDiagramDiv", // create a new Diagram in the HTML DIV element "myDiagramDiv"
         {
             initialContentAlignment: go.Spot.Center,
             "undoManager.isEnabled": true
         });

  2. First page:

    @{
    ViewBag.Title = “DisplaySchema3”;
    }

  3. Second JS:

    function initElectricalShema() {
    var $ = go.GraphObject.make; // for conciseness in defining templates

     myDiagram =
   $(go.Diagram, "myDiagramDiv",  // create a new Diagram in the HTML DIV element "myDiagramDiv"
     {
         initialContentAlignment: go.Spot.Center,
         allowDrop: true,  // Nodes from the Palette can be dropped into the Diagram
         "undoManager.isEnabled": true
     });

  4. Second page:

    @{
    ViewBag.Title = “DisplaySchema1”;
    }

  5. Layout page:

    @Scripts.Render("~/Scripts/go-1.7.11.js")
    @Scripts.Render("~/Scripts/electrical_shema.js")
    @Scripts.Render("~/Scripts/update_view.js")
    @Scripts.Render("~/Scripts/data_binding.js")

     function OnEndCallback(s, e) {
     initElectricalShema();
     initDataBinding();
 }
7

How can you possibly initialize two separate pages in one JavaScript function? There is a separate JavaScript environment for each page – there is no sharing of scripts or state between them.

8

“How can you possibly initialize two separate pages in one JavaScript function?”

What do you mean by this?

9

Thus any executing JavaScript code can only affect the page that it is running in, not any other page. It is possible to communicate with other pages, but that requires effort and cooperation.

10

We’ve solved the issue by using global JavaScript variable in this way:

<script type="text/javascript">
    var temp;

    // Click on DevExpress' navigation bar item
    function OnItemClick(s, e) {
        var name = e.item.name;
        temp = name;
        if (e.item.group.name == 'gAjax') {
            CallbackPanel.PerformCallback({ itemName: name });
        }
    }

    function OnEndCallback(s, e) {
        if (temp == "DisplaySchema1")
            initElectricalShema();
        if (temp == "DisplaySchema2")
            initComplexObject();
        if (temp == "DisplaySchema3")
            initDataBindingSimple();
        if (temp == "DisplaySchema4")
            initDataBindingMiddle();

        //initSimpleSchema();
    }
</script>