Error when expanding and collapsing a node in Org Chart

Question

Hey I tried using the node expand and collapse feature. But if you expand collapse the same node 3 times, then it stops working and throws an error. I am using Syncfusion.Blazor.Diagrams (Latest stable 19.3.0.55)

These are the error logs on browser console:

Cannot read properties of null (reading 'root')

TypeError: Cannot read properties of null (reading 'root')

at Mn (https://localhost:7206/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-7fa8f9.min.js:1:234286)

at t.updateEdges (https://localhost:7206/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-7fa8f9.min.js:1:1054479)

at t.updateEdges (https://localhost:7206/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-7fa8f9.min.js:1:1054256)

at t.doLayout (https://localhost:7206/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-7fa8f9.min.js:1:1036937)

at t.updateLayout (https://localhost:7206/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-7fa8f9.min.js:1:1036404)

at o.doLayout (https://localhost:7206/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-7fa8f9.min.js:1:728759)

at o.onPropertyChanged (https://localhost:7206/_content/Syncfusion.Blazor.Diagrams/scripts/diagrams-7fa8f9.min.js:1:666105)

at o.e.dataBind (https://localhost:7206/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor-7fa8f9.min.js:1:73174)

at o.n.dataBind (https://localhost:7206/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor-7fa8f9.min.js:1:90550)

throwError @ syncfusion-blazor-extended-7fa8f9.min.js:1

setModel @ syncfusion-blazor-extended-7fa8f9.min.js:1

(anonymous) @ blazor.server.js:1

beginInvokeJSFromDotNet @ blazor.server.js:1

(anonymous) @ blazor.server.js:1

_invokeClientMethod @ blazor.server.js:1

_processIncomingData @ blazor.server.js:1

connection.onreceive @ blazor.server.js:1

o.onmessage @ blazor.server.js:1

2diagrams-7fa8f9.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'root')

at Mn (diagrams-7fa8f9.min.js:1:234286)

at t.updateEdges (diagrams-7fa8f9.min.js:1:1054479)

at t.updateEdges (diagrams-7fa8f9.min.js:1:1054256)

at t.doLayout (diagrams-7fa8f9.min.js:1:1036937)

at t.updateLayout (diagrams-7fa8f9.min.js:1:1036404)

at o.doLayout (diagrams-7fa8f9.min.js:1:728759)

at t.expandNode (diagrams-7fa8f9.min.js:1:617582)

at o.nodePropertyChange (diagrams-7fa8f9.min.js:1:811236)

at t.initExpand (diagrams-7fa8f9.min.js:1:616627)

at t.mouseUp (diagrams-7fa8f9.min.js:1:442457)

I am attaching the code and video of the bug. Please let me know how can I solve this problem. Thank you!

Attachment: SF_Diagram_Node_Expand_Bug_e3121afd.zip

Aravind Ravi · Answer

Hi Andrew,We will validate and update you with more details within two
business days on May 9th, 2022RegardsAravind Ravi

syed · Answer

Hey Aravind, thanks for replying. I am wondering if the same feature (node expand and collapse) is available in the new diagram component? Right now I am using the old diagram component (Diagrams Classic) but if I migrate to the newer component (Diagram component), does it have this feature already?
Thanks and Regards,
Syed

Shyam G · Answer

Hi Syed,We dont have support for the expand/collapse feature in the new blazor diagram component. We have already logged a feature. You can track the status of the feature from the below feedback link. Also, please confirm us whether you need a fix for diagram classic blazor component or you will upgrade to new blazor diagram component.https://www.syncfusion.com/feedback/31276/need-an-option-to-expand-collapse-nodes-in-diagram Regards,Shyam G

Andrew Kapuduwa · Answer

Hi Shyam, is it possible to fix the bug in the classic diagram component?

Aravind Ravi · Answer

Hi Andrew,We will validate and update you with more details on May 11th
2022RegardsAravind Ravi

Aravind Ravi · Answer

Hi Andrew,We suspect that you are using an older NuGet version of the diagram so that the reported issue occurs. We have created a sample in the latest
version of NuGet (20.1.51). When we tried to expand/collapse the node, the
node gets expanded/collapsed properly without any console exception and while
collapsing the node, the space between two nodes is proper and the layout gets
rendered properly. We have attached a video demonstration of how we perform
expand/collapse the nodes. Please find the attached video and sample in the below
linkVideo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-1871259375Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Complex-Hierarchical-Tree117404089Also, In the startup.cs file in the ConfigureServices method
add the below service to increase the message size    code snippet:

public void ConfigureServices(IServiceCollection services)
          {
             
  services.AddRazorPages();
              services.AddServerSideBlazor();
             
  services.AddSingleton<WeatherForecastService>();
             
  services.AddSyncfusionBlazor();
             
  services.AddServerSideBlazor().AddHubOptions(o =>
              {
                  o.MaximumReceiveMessageSize =
  102400000;
              });
          }

RegardsAravind Ravi

Andrew Kapuduwa · Answer

Hi Aravind, thanks for replying. I tried upgrading from Syncfusion.Blazor.Diagrams (Latest stable 19.3.0.55) to

Syncfusion.Blazor.Diagrams (20.1.0.51). It does solve the node expand and collapse bug. But it doesn't display the org chart properly.The chart only displays 1 employee (CEO) in all places. You can even view the bug in the video you have attached (the only employee that is being displayed is the CEO in all places).  How do I fix this problem? Do I have to do something differently in the newer diagrams version?

Aravind Ravi · Answer

Hi Andrew,

We are able to reproduce the reported issue at our end. We are validating the
issue and update you with more details on May 17th 2022.RegardsAravind Ravi

Aravind Ravi · Answer

Hi Andrew,      Reported Issue: The template does not update properly for nodes     We can reproduce the issue and confirmed this as a defect.
We have logged a defect report for this issue. We will fix this issue and
provide the patch on the June 7th, 2022 weekly patch release.   https://www.syncfusion.com/feedback/34959/template-do-not-update-properly-for-nodes      Regards,   Aravind Ravi

Aravind Ravi · Answer

Hi Andrew,

Sorry for the inconvenience caused. We have fixed the reported issue, but due
to some technical difficulties, we are unable to include the fix for the issue,
in this week's patch release. However, we will include the issue fix in our Volume
2 2022 Main release which is scheduled to release at end of June. We appreciate
your patience until then.RegardsAravind Ravi

Aravind Ravi · Answer

Hi Andrew,Reported
Issue : Template do not update properly for nodes.The reported
issue has been fixed in the volume 2 2022 main release. We are glad to announce
that our Essential Studio 2022 Volume 2 release v20.2.0.36 is rolled out and is
available for download under the following link.
https://www.syncfusion.com/forums/175975/essential-studio-2022-volume-2-main-release-v20-2-0-36-is-available-for-downloadWe thank you
for your support and appreciate your patience in waiting for this release.
Please get in touch with us if you would require any further assistancehttps://www.syncfusion.com/feedback/34959/template-do-not-update-properly-for-nodesRegardsAravind Ravi