Diagram and callbacks

[Andrey Kucher]

Hello

I'm using your diagram at another framework (DevExpress XAF) and have a problem. Xaf using callbacks to update areas and not call sctipts at startup (and do not reload page), but diagram need to call scripts for render nodes everytime.

This is DX support answer:

"We researched the issue further and found that the Diagram control needs to execute a script on startup. Since an XAF Web application loads a web page once and then uses callbacks to update the markup in certain areas, the Diagram script is not invoked and the control markup remains empty. We've found a workaround based on creating a derived control as follows:

public class TestDiagram : Diagram {

public XafCallbackManager CallbackManager {

get { return ((ICallbackManagerHolder)Page).CallbackManager; }

}

protected override void Render(HtmlTextWriter writer) {

base.Render(writer);

if(Page.IsCallback) {

CallbackManager.Rendered += (s, e) => {

var startupScripts = ScriptManager.GetCurrent(Page).GetRegisteredStartupScripts();

string script = startupScripts.FirstOrDefault(a => a.Key == "EliminationChart").Script;

e.Script += script;

};

}

}

}

"

This solution is works, but possible you have better solution. It is also has problem with rerender: nodes replacing from start position (see video).

If you need a sample project with dx libraries I could attach it for you.

So my questions:

- Do you have better solution?

- How to avoid nodes replacing?

Attachment: DiagramCallback_18990fc7.7z

[Shyam G]

Hi Andrey, 

Before looking into your requirement, could you please share your sample with dx libraries and demonstrate a video to replicate an issue, so that we can analyze and provide you a better solution. 

Regards, 

Shyam G 

[Andrey Kucher]

Hello.

Attachment contains video and sample project. This is simple project with callback control, which really using in xaf framework. So, I need solution (if exists) with diagram control itself.

Attachment: DiagramCallback_37281ca3.7z

[Shyam G]

Hi Andrey, 

 

When we run your sample, we face an exception as shown in the below screenshot. Could you please provide us an Devexpress.Data.v17.1 dll and also Devexpress dependent dll to run the sample or please share us an runnable sample, so that we can analyze it and provide an better solution. 

 

Screenshot: 

 

 

Regards,
Shyam G 

[Andrey Kucher]

Please accept my apologies. Just wanted to minimize project and drop all dlls, but looks like it get it from another place. You could find required dlls in attachment.

Attachment: dxLibs_874d76de.7z

[Shyam G]

Hi Andrey, 

 

When you perform callback using DevExpress, the diagram scripts are not initialized and so the diagram is not rendered. So please serialize the diagram model object to JSON string while performing callback and set it to asp hiddenField value. In the DevExpress EndCallback event, you can get the hiddenField value and parse JSON string to object and render the diagram. Please refer to the code example below. 

 

Code example: 

            SerializeObject data = new SerializeObject(); 

            //convert JSON object to JSON string 

            string json = data.SerializeToJson(control.Model); 

            HiddenField hiddenData = new HiddenField(); 

            hiddenData.ID = "ValueHiddenField"; 

            //set JSOn to hiddenfield value 

            hiddenData.Value = json; 

            this.form1.Controls.Add(hiddenData); 

        //define endcallback event 

            panel.ClientSideEvents.EndCallback = "EndCallback"; 

 

function EndCallback() {             

            var hiddenvalue = document.getElementById("ValueHiddenField"); 

            var data = JSON.parse(hiddenvalue.value); 

            $("#EliminationChart").ejDiagram({ 

                height:data.height, 

            }); 

        } 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/devexpresssample-739650829 

 

Regards, 

Shyam G 

[Andrey Kucher]

Hello again.

After some search with dx support we accepted several solution: generate diagram at server and return json to client and use serialization load method, but problem in client exception on restoring (see attached screenshot). Why does this happens and how we could send server json to restore it at client?

Attachment: DiagramLoadJsonFromServer_1d29fef7.7z

[Shyam G]

Hi Andrey, 

The reported issue is a known issue and it has been fixed in the latest version 15.4.017. could you please upgrade to the latest version 15.4.0.17 which is available for download under the following link. 

Link: https://www.syncfusion.com/forums/134428/essential-studio-2017-volume-4-release-v15-4-0-17-is-available-for-download 

Regards, 

Shyam G 

[Andrey Kucher]

Thanks, this fix script error, but I don't see my nodes even after add loading nodes specially:

Page.ClientScript.RegisterStartupScript(this.GetType(), "DiagramRestore", $@"(function(){{

var chart = $('#{diagramDiv.ClientID}');

chart.ejDiagram();

var parsedDiagram = JSON.parse('{json}');

var diagram = chart.ejDiagram('instance');

diagram.load(parsedDiagram);

chart.ejDiagram({{ nodes : parsedDiagram.nodes }});

}})();",

How could I restore a whole diagram with nodes and connections?

[Shyam G]

Hi Andrey, 

 

Could you please confirm us whether an diagram renders as shown in the below screenshot. If yes, you have set diagram models width and height in percentage and its parent height would have lesser pixel value.  Also by default, if we set diagram model’s width and height property in percentage, then diagram size will be set based on its parent size. So, please set the diagram model height in pixel or set parent height in higher pixel value.  Still if you have face problems, could you please share us more details such as console error if any occurs in browser and your JSON data.  

Screenshot: 

 

Regards, 

Shyam G 

[Andrey Kucher]

No, looks like problem in nodes coordinates, sizes and so on is missed on restoring:

[Shyam G]

Hi Andrey, 

We could not replicate the reported issue with your screenshot. Could you please share us more details such as share your JSON data which you load in diagram load method and also share your code if any used after load method or modify the below sample to replicate an issue. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/7z/simplesampleasp-1875125838 

Regards, 

Shyam G 

[Andrey Kucher]

In attachemnt you could found sample files and video with steps to reproduce.

Attachment: DiagramLoadJson_910e526e.7z

[Shyam G]

Hi Andrey, 

On analyzing your video, we suspect that you are performing save and load layout in your sample. we have checked in our sample with layout and it is working fine at our end.  Please refer to the sample below. Also the sample which you have provided doesn’t have Form1_load method and CreateChart method. So please modify the below sample to replicate an issue at our end or please share your runnable sample with Form1_load and CreateChart method. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/7z/samplenov30-208079028 

Regards, 

Shyam G 

[Andrey Kucher]

Sorry, looks like I sent another sample. Please use this one.

My idea is using server generation chart and restore at client from json. This is related with DevExpress XAF architecture.

So, I just need somehow to create diagram at server with nodes and connections, convert to JSON, return it to client and restore. It is working, but nodes is lost sizes and position by some cause (see previous attached video).

Attachment: WebApplication1_6c8403da.7z

[Shyam G]

Hi Andrey, 

 

We considered this “when diagram model elements defined in code behind is loaded using client side load method, diagram renders empty without elements ” as an issue and a support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

                                                                                                                                     

Regards, 

Shyam G 

[Rajkumar]

Hai,

Thank you Shyam G sir for giving valuable information which helped me a lot in my project

[Shyam G]

Hi Rajkumar, 

Thanks for your update. 

Please let us know if you need further assistance on this. 

Regards, 

Shyam G 

[Andrey Kucher]

Hello. 

It's me again. I have found we have a little difference between restored diagram and created at server: I see resize markers, although I have no difference in nodes constratins (See the attachment, "2359306"). How could I remove it on restoring from json?

Attachment: ResizeMarkersAfterJsonRestore_4337f7b0.7z

[Shyam G]

Hi Andrey, 

 

We have created a support incident under your account to track the status of this requirement. Please log on to our support website to check for further updates. 

 

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents 

 

Regards, 

Shyam G 

[GenerativeMasters]

Great thread — thanks to the Syncfusion team and community for the detailed callback workaround. Your thorough code samples and responsive support truly help bridge diagram rendering with server-callback frameworks.

[Preethi Rajakandham]

Hi GenerativeMasters,

Thank you for the update.

Please let us know if you require any further assistance on this. We will be happy to assist you.

Regards,

Preethi R

[upskillgenerativeai skillmove]

Thanks to the Syncfusion team and community for guiding through the callback-based rendering scenario. The workaround using JSON serialization + hidden field + client-side load seems clever and definitely helps when the standard script-initialization fails during callbacks. The sample code and step-by-step discussion make the issue and resolution process clear.

A couple of thoughts/requests for improvement:

• It would be great if future versions of Diagram handle callback-based rendering out-of-the-box — so that nodes, positions, connectors aren’t lost, and there’s no need for manual serialization / load.

• Also worth improving the restore logic (node coordinates/size + remove unwanted resize markers), as mentioned by other users — this would make callback integration much smoother with minimal effort.
  
  
  

[Moulidharan Gopalakrishnan]

Hi,

Thank you for your suggestions and feedback.

Please note that based on the forum history, you are currently using the EJ1 Diagram component in ASP.NET Web Forms. We would like to inform you that the EJ1 Diagram component has reached its end of support and is no longer actively maintained. While your existing applications can continue to run as-is, we will not be providing new fixes, features, or compatibility updates for EJ1 Diagram going forward, except for minimal support in rare cases of critical bugs.

For your reference, our modern EJ2 Diagram component is available, which offers:

• Improved performance and scalability and a richer feature set
• Active maintenance and ongoing updates
• Support across multiple frameworks (JavaScript/TypeScript, Angular, React, Vue, ASP.NET Core, and MVC)

Any suggestions regarding improvements in the EJ2 Diagram component are considered valuable and will be reviewed for possible inclusion.

Please let us know if you need any further assistance. We’ll be happy to help.

Regards,

Moulidharan