DiagramListener Modified wont fire

During load, I declare the listener:

        myDiagram.addDiagramListener("Modified", function (e) {
            var button = document.getElementById("ContentPlaceHolder1_btnSave");
            if (button) button.disabled = !myDiagram.isModified;

While loading, the listener definition executes with no problem so the function is defined properly and the button is initially disabled.

Then when the user makes changes to the nodes, the code updates the node data and the myDiagram.isModified becomes true. So far all is good. However, the function above does not fire as if the listener itself doesn’t fire. The button never becomes enabled.

Any help would be appreciated. Thank you in advance.

Your listener code looks just like the ones in the samples, and the samples work the way that you want, don’t they? So I wonder what else is different that would matter. Are there any interesting warning or error messages in the console log? Is your app otherwise working well?

The app works fine with the exception of this problem. I don’t get any errors. The button is a regular asp:button that works ok otherwise. This is its definition:

<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="save();" OnClick="btnSave_Click" UseSubmitBehavior="false"/>

The entire function below runs ok, setting node properties with no problems. As soon as the first node property gets set, the value of
becomes true. Notice that I added the line:
myDiagram.isModified = true;
at the end of the function just to hover above “isModified” and confirm that is true. However, the listener never fires. I have a stop in it to verify that it does not execute.

    function showHideItem(prop) {
        var m = myDiagram.model;
        var n = 0;  // number of shown text elements in each node.  The image must resize based on that number so it fits in the node as large as possible.
        var imageShown;

        if (m) {
            m.nodeDataArray.forEach(function (nd) {
                imageShown = nd.pictureVisible;
                n = 0;
                switch (prop.get_text()) {
                    case "Show Image":
                        var vis = nd.pictureVisible;
                        m.setDataProperty(nd, "pictureVisible", !vis);
                        imageShown = nd.pictureVisible;
                    case "Show Title Group Name":
                        var vis = nd.TGNVisible;
                        m.setDataProperty(nd, "TGNVisible", !vis);
                        if (nd.TGNVisible) n++; else n--;
                    case "Show Pocket Name":
                        var vis = nd.PCNVisible;
                        m.setDataProperty(nd, "PCNVisible", !vis);
                        if (nd.PCNVisible) n++; else n--;
                    case "Show Rank":
                        var vis = nd.RankVisible;
                        m.setDataProperty(nd, "RankVisible", !vis);
                        if (nd.RankVisible) n++; else n--;

                // resize the image

                if (imageShown) {

                    // resize the image
                    var tempSizeX = nd.pictureSize.split(" ")[0];
                    var tempSizeY = nd.pictureSize.split(" ")[1];
                    var finalSize;
                    var factor = 1;

                    factor = factor - Math.abs(n) * 0.15;
                    if (n > 0) tempSizeX = tempSizeX * factor; else tempSizeX = tempSizeX / factor;
                    if (n > 0) tempSizeY = tempSizeY * factor; else tempSizeY = tempSizeY / factor;

                    finalSize = tempSizeX + " " + tempSizeY;

                    m.setDataProperty(nd, "pictureSize", finalSize);

            myDiagram.isModified = true;

Are you making these changes within a transaction? Transactions are required. And you don’t need to set Diagram.isModified = true, since that will happen automatically.

That was it. I was missing the transaction. Thank you

A post was split to a new topic: When resizing my diagram then modified event is not called