How to trigger AJAX call on dropping object from palette to diagram?

GoJS
1

I have palette and diagram. There are some macro-objects in palette and when I drop them to diagram they expand to particular element plus table where are properties of that element. The issue is I call AJAX at the very beginning of JavaScript file in this way:

function initMacro() {
    jQuery.ajax({
        type: "GET",
        url: '/Home/GetRandomObjectProperties'
    }).done(function(data) {
        var $ = go.GraphObject.make;
    ...

that triggers MVC’s /Home/GetRandomObjectProperties method only once and tables contain the same properties for all elements. Of course, each element has its own list of properties, which means described scenario doesn’t work properly.

My question is how to trigger AJAX call when drop the particular macro-element to diagram in order to show different properties for different elements?

This is how it looks like:

ss1.png1206×676 45.6 KB

2

Note how there already is an “ExternalObjectsDropped” DiagramEvent listener in your app, as there is in Graphical Macros via Auto Ungrouping.

You can initiate your AJAX request then, passing enough information so that the response can identify which node data object to modify when it arrives successfully. Remember to wrap the model modifying code in a transaction.

3

Thank you. It works now, but there is a small defect. The objects in palette are reloading every time when I drop any of them to diagram. How to get rid if it?

Here’s the code:

// this DiagramEvent is raised when the user has drag-and-dropped something
// from another Diagram (a Palette in this case) into this Diagram
myDiagram.addDiagramListener("ExternalObjectsDropped", function (e) {
    // stop any ongoing text editing
    if (myDiagram.currentTool instanceof go.TextEditingTool) {
        myDiagram.currentTool.acceptText(go.TextEditingTool.LostFocus);
    }
    // expand any "macros"
    myDiagram.commandHandler.ungroupSelection();
    // start editing the first node that was dropped after ungrouping
    //var tb = myDiagram.selection.first().findObject('TEXT');
    //if (tb) myDiagram.commandHandler.editTextBlock(tb);
    jQuery.ajax({
        type: "GET",
        url: '/Home/GetRandomObjectProperties'
    }).done(function (data) {
        myDiagram.startTransaction("properties");
        myPalette.model = new go.GraphLinksModel([
            // a regular nodes
            { key: "B", text: "block B", color: "black" },
            { key: "C", text: "block C", color: "black" },
            // a group nodes
            { key: "G", text: "Macro1", isGroup: true },
            { key: "D", text: "Macro2", isGroup: true },
            { category: "circle", key: "Gc", text: "A", color: "black", group: "G", loc: "0 0" },
            {
                category: "table", key: "Ga", group: "G", loc: "60 0",
                properties: data.map(function (item) {
                    return { "property_name": item.Item1.toString(), "property_value": item.Item2.toString() };
                })
            },
            { category: "object1", key: "Gd", text: "AAAA", color: "black", group: "D", loc: "0 0" },
            {
                category: "table", key: "Ge", group: "D", loc: "60 0",
                properties: data.map(function (item) {
                    return { "property_name": item.Item1.toString(), "property_value": item.Item2.toString() };
                })
            }
        ], []);
    });
    myDiagram.commitTransaction("properties");
});

myPalette.model = new go.GraphLinksModel([
    // a regular nodes
    { key: "B", text: "block B", color: "black" },
    { key: "C", text: "block C", color: "black" },
    // a group nodes
    { key: "G", text: "Macro1", isGroup: true },
    { key: "D", text: "Macro2", isGroup: true },
    { category: "circle", key: "Gc", text: "A", color: "black", group: "G", loc: "0 0" },
    {
        category: "table", key: "Ga", group: "G", loc: "60 0"
    },
    { category: "object1", key: "Gd", text: "AAAA", color: "black", group: "D", loc: "0 0" },
    {
        category: "table", key: "Ge", group: "D", loc: "60 0"
    }
], []);
4

You are replacing the whole Model instead of just modifying the specific data that has changed.

Furthermore you are replacing the Palette.model rather than modifying the target Diagram. That’s not what I understood that you wanted to do. Although it’s common enough to populate the data in the palette dynamically.

5

“Furthermore you are replacing the Palette.model rather than modifying the target Diagram.”

I’m not sure what you mean, but that is from your sample: Graphical Macros via Auto Ungrouping

The second part of your answer is also not so clear for me because I’ve used the same sample as I mentioned above.

Everything works fine expect reloading palette. What part of code I need to remove or add or whatever?

6

After drag-and-dropping something from the Palette to the main Diagram you are initiating an ajax call that eventually replaces the palette’s model. If that’s what you really want to do, OK, but you just asked about why the palette is reloading each time.

Also it does not make sense to conduct a transaction on the main diagram when you are modifying the palette and making no changes to the main diagram. By the way, no transaction is needed or allowed when replacing a Diagram.model.

7

I’m not trying to change anything in palette. All I want to do is to drop the object from palette to diagram area and that’s all. There are four objects in palette: two of them are normal and two of them are macros. Everything works fine, but every time when I drop any object from palette to diagram, the palette refreshing. I don’t understand why?

By the way - how to get the selected object (node) from palette using “e” argument. All I tried I’ve got “undefined” result.

8

I just pointed out why – you are replacing its model.

DiagramEvent | GoJS API says that for an “ExternalObjectsDropped” DiagramEvent, the e.parameter is the source Diagram.

9

I know I have 2 times: myPalette.model = new go.GraphLinksModel, but which one is extra and how to modify the code? Excuse me, but I don’t have enough knowledge about GoJS. My manager waits for my testing results to finally buy your product. Ive’ already said - yes, buy it, but, as you can see, I’m trying to do something what we need, but I have difficulties.

In this case, I simply need the code that works. Could you provide me with that, please?

10

That depends on what you want your app to do, which is something I do not understand. I merely answered your question about why the Palette was “refreshing”.

11

We have MVC application with DevExpress’ navigation bar on the left side and when we click some item in it, the particular view is displaying on the right side of splitter that divides left and right side. One of those views is GoJS diagram. It contains palette with objects and diagram area. We drag and drop objects from palette to diagram area and that’s all.

As I said everything works fine except refreshing palette. Ok. I’m replacing model. I’ve tried a few things to overcome the issue, but the issue is not disappeared.

12

Regarding “e.parameter”, I’ve tried - e.paramater.node, but node is - undefined. How to get node and check if it’s group or not?

13

There is no Diagram.node property.

There is a Diagram.selection property, which is a collection of the selected Parts.

14

Ok. I’ve got 1 part. And how to access it and check if it’s group or not?

15

.first()

16

I know first(). And what to do next?

Could you, please, help us with first question - how to get rid of reloading palette’s content?

17

As I said above…

18

Unfortunately, we didn’t have the answer to our questions. Could someone else help us? Thank you in advance.

19

All I’ve done is what Walter told you: remove the model replacement from your AJAX and replaced it with some boilerplate for updating the dropped nodes, which you’ll probably need to update. In general, we can’t debug your code for you or continually provide you with code specific to your app. I highly suggest you read all the intro pages to become more familiar with GoJS.

// this DiagramEvent is raised when the user has drag-and-dropped something
// from another Diagram (a Palette in this case) into this Diagram
myDiagram.addDiagramListener("ExternalObjectsDropped", function (e) {
    // expand any "macros"
    myDiagram.commandHandler.ungroupSelection();
    // make AJAX request
    jQuery.ajax({
        type: "GET",
        url: '/Home/GetRandomObjectProperties'
    }).done(function (data) {
        // find the node you want to modify, which will be in the Set myDiagram.selection
        var nodedata = myDiagram.selection.first().data; // you may want something else
        var properties = data.map(function (item) {
            return { "property_name": item.Item1.toString(), "property_value": item.Item2.toString() };
        });
        myDiagram.model.setDataProperty(nodedata, "properties", properties);
});

myPalette.model = new go.GraphLinksModel([
    // a regular nodes
    { key: "B", text: "block B", color: "black" },
    { key: "C", text: "block C", color: "black" },
    // a group nodes
    { key: "G", text: "Macro1", isGroup: true },
    { key: "D", text: "Macro2", isGroup: true },
    { category: "circle", key: "Gc", text: "A", color: "black", group: "G", loc: "0 0" },
    {
        category: "table", key: "Ga", group: "G", loc: "60 0"
    },
    { category: "object1", key: "Gd", text: "AAAA", color: "black", group: "D", loc: "0 0" },
    {
        category: "table", key: "Ge", group: "D", loc: "60 0"
    }
], []);
20

We don’t ask you to debug our code. We want to buy your product and have some difficulties. That’s why we came here to ask for help.

I’ve read the articles you mentioned, but it’s still not clear.

The latest code you posted doesn’t fix palette refreshing. Now we see nothing in both palette and diagram areas.