EJ1 - Diagram - create event

Question

We have an application where there is a tool bar with each item containing an EJ1 diagram diagram control. What is happening now is that we set a busy animation going the tab is cliced then turn it off when the tab is selected. This is a problem because the diagram may not be fully rendered when the tab is selected.

I am thinking that create event is the proper place to disable the animation, but I am having trouble hooking it up. I am open to alternate solutions if this isn't a good idea. Are there any sample anywhere on how to hookup this event.

Thanks,

Gordon Brown

Aravind Ravi · Answer

Hi Gordon,We have created a sample to trigger click event. After the
diagram gets created , diagram create event gets triggered. In that event you can
able to modify the diagram or nodes. Please refer to the below code snippet and
sample

$("#diagram").ejDiagram({
                     
  width: "100%",
                     
  height: "600px",
                     
  nodes: nodes,
                     
  pageSettings: { scrollLimit: "diagram" },
                     
  defaultSettings: {
                         
  node: { borderColor: "#1BA0E2", fillColor:
  "#1BA0E2", labels: [{ "fontColor": "white" }]
  },
                         
  connector: { targetDecorator: { shape: "arrow", borderColor:
  "#606060", width: "10", height: "10" },
  lineColor: "#606060", labels: [{ "fillColor":
  "white" }] },
                     
  },
                     
  connectors: connectors,
                     
  enableContextMenu: false,
                    create: function(args) {
                      alert("Hit");
                    }
                  });
              });

Sample: https://jsplayground.syncfusion.com/ut0euclwRegardsAravind Ravi

Gordon J Brown · Answer

Thank you very much, but it looks like this function is only called once when the diagram is loaded. The documentation says that this is called when the diagram is fully rendered, but it looks to me like it is called earlier then that.

I am looking for an event to hook into when we refresh the page. Any ideas?

Thanks,

Gordon Brown.

Gordon J Brown · Answer

In the example you so nicely provided the event fires, but the canvas is blank when it fires. I was looking for an event that fires after the diagram is rendered.

Aravind Ravi · Answer

Hi Gordon,By default, in the diagram, create event gets
triggered after diagram gets rendered and before append the diagram element in
window. In the create event you can able to do customizations for the diagram,
so that it gets reflected in the UI. If you want to trigger create event after
diagram append in window means then use setTimeout in the create event. So that
event gets triggered after diagram rendered in screen and able to do
customizations. Please refer to below code snippet and sample

create: function(args) {
                     
  setTimeout( () => {
                     
  alert("Hit");
                     
  },500);
                   
  }

Sample: https://jsplayground.syncfusion.com/4nnz1lxgRegardsAravind Ravi