Scroll not reset after collapsing Nodes in diagram

[Andrew Kapuduwa]

Hi, how do I reset the scroll or the distance between the nodes after collapsing them programmatically?

Right now I am collapsing all the nodes which report to the parent node (CEO) using DiagramEvents.

<DiagramEvents DataLoaded="OnDataLoaded"></DiagramEvents>

I use following logic to collapse the nodes:

public void OnDataLoaded(IDataLoadedEventArgs args)
    {
        foreach(var node in diagram.Nodes)
        {
            JObject jObject = JObject.FromObject(node.Data);
            var employee = jObject.ToObject<OrganizationalDetails>();

            if (employee.Manager == "CEO")
                node.IsExpanded = false;
        }
    }

This code collapses the nodes but the diagram gets left with empty spaces between the nodes:

I am attaching the video and code for issue.
Please let me know if there is any way to remove these spaces between the nodes after collapsing them.
Thanks

Attachment: Diagram_Scroll_space_bug_ab54eeb6.zip

[Aravind Ravi]

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 link

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Video-1871259375

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Complex-Hierarchical-Tree117404089

Also, 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;

            });

        }

   

Regards

Aravind Ravi

[Andrew Kapuduwa]

Hey Aravind, the space between two nodes is proper and layout gets rendered properly as well, both in the old and new version of Syncfusion.Blazor.Diagrams ​only if you click the expand or collapse the node manually (through mouse click). 

But the layout doesn't get rendered and the space between the nodes is not proper when you expand / collapse the node programmatically (through code).

I am attaching the video and code (using Syncfusion.Blazor.Diagrams 20.1.0.51​) when I try to expand collapse programmatically. Please find them attached.

Thanks

Attachment: Diagrams_Scroll_Bug_80db7a29.zip

[Aravind Ravi]

Hi Andrew,

We will validate and update you with more details on May 18^th, 2022

Regards

Aravind Ravi

[Andrew Kapuduwa]

Hi Aravind, is this issue fixable?

[Aravind Ravi]

Hi Andrew,

On analyzing the provided code snippet, we suspect that issue occurs due to you have comment doLayout method after collapsing the nodes. So please call the doLayout method to arrange the nodes and connectors properly in the layout.

Regards

Aravind Ravi

[Andrew Kapuduwa]

Hi Aravind, thanks for analyzing the code snippet. I have tried to use doLayout ​and then with the combination of BeginUpdate and EndUpdate​ but no luck, the layout still has empty spaces between the nodes. Is there anything else that I can try?

[Aravind Ravi]

Hi Andrew,

In the diagram, after diagram gets created, diagram created event gets triggered. In that event you can iterate the nodes and set isExpanded as false to the parent node. So that when you load the layout, the node gets collapsed. So please use it in the diagram created event.

Regards

Aravind Ravi

[Andrew Kapuduwa]

Hi Aravind, I tried to collapse the nodes in Created ​diagram event but the nodes don't collapse. Then I tried collapsing the node using DataLoaded diagram event, the nodes do collapse but the spacing issue still remains (diagrams 20.1.0.57 Weekly Release)

Is this issue fixable?

[Aravind Ravi]

Hi Andrew,

We will validate and update you with more details on June 6^th 2022.

Regards

Aravind Ravi

[Aravind Ravi]

Hi Andrew,

By default, in the blazor diagram, we cannot able to handle expand/collapse on initial rendering programmatically. Either after all, nodes get rendered in the layout, you can able to expand/collapse through button click or on initial you collapse all the nodes and set the parent as expanded. So that in the layout all nodes get collapsed expand parent node.

Regards

Aravind Ravi