not shown at first visit and prinit prInteractiveServer

Question

I managed to render the organization from my employee table by referencing documentation, but I'm facing three major issues: On the first render, no data is displayed. It only appears after visiting another route and returning to the page. When I try to print the page, the layout breaks, and only part of the content is printed properly.
If I make even minor changes to the CSS or layout, none of the data renders anymore, leaving me with a blank white screen. I've tried resolving these issues by creating an isLoading function and using OnInitializedAsync for asynchronous handling, but this only results in a blank white screen.  I'm currently using Net9 with Version="28.1.36".  Below is my current code.

LEE · Answer

@page "/organizationchart"@rendermode InteractiveServer@using Syncfusion.Blazor.Diagram@using Microsoft.EntityFrameworkCore@using SyncfusionBlazorApp1.Data@inject ApplicationDbContext DbContext @code { int HorizontalSpacing = 40; int VerticalSpacing = 50; public List DataSource = new(); protected override void OnInitialized(){ try { DataSource.Clear(); // 1. 부서 데이터 로드 - ToList() 사용 var departments = DbContext.Departments.ToList(); foreach (var dept in departments) { DataSource.Add(new OrgChartNode { id = $"D{dept.Id}", text = dept.Name, manager = null, isDepartment = true }); } // 2. 직원 데이터 로드 - ToList() 사용 var employees = DbContext.Employees .Include(e => e.Position) .Include(e => e.Department) .ToList(); foreach (var emp in employees) { DataSource.Add(new OrgChartNode { id = emp.Id.ToString(), text = $"{emp.Name} {emp.Position.Name}", manager = $"D{emp.DepartmentId}", isDepartment = false }); } } catch (Exception ex) { Console.WriteLine($"Error loading data: {ex.Message}"); }} private void OnNodeCreating(IDiagramObject obj) { Node node = obj as Node; OrgChartNode data = node.Data as OrgChartNode; if (data.isDepartment) { // 부서 노드 스타일 node.Height = 70; node.Width = 200; node.Style = new ShapeStyle() { Fill = "#357BD2", StrokeWidth = 2, StrokeColor = "Black" }; } else { // 직원 노드 스타일 node.Height = 60; node.Width = 150; node.Style = new ShapeStyle() { Fill = "#6BA5D7", StrokeWidth = 1, StrokeColor = "Black" }; } node.Annotations = new DiagramObjectCollection() { new ShapeAnnotation() { Content = data.text, Style = new TextStyle() { Color = "white", Fill = "transparent" } } }; } private void OnConnectorCreating(IDiagramObject connector) { Connector connectors = connector as Connector; connectors.Type = ConnectorSegmentType.Orthogonal; connectors.Style = new TextStyle() { StrokeColor = "#6495ED", StrokeWidth = 1 }; connectors.TargetDecorator = new DecoratorSettings { Shape = DecoratorShape.None, Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "#6495ED" } }; } public class OrgChartNode { public string id { get; set; } public string manager { get; set; } public string text { get; set; } public bool isDepartment { get; set; } }}

Balavignesh RaviChandran · Answer

Hi Lee,We tried reproducing the behavior on our end and encountered a similar issue. To assist further, we’ve attached our working sample for your reference.Could you please confirm if this matches the issue you’re experiencing? If there’s anything missing in the sample, kindly make the necessary changes and provide detailed replication steps. This will help us investigate and provide a solution promptly.We appreciate your cooperation and look forward to your response.Best regards,Bala Vignesh RAttachment: SF195635_b92efad1.zip

LEE · Answer

Thx

Balavignesh RaviChandran,But Still printing the whole node is not supportive.﻿﻿And your code is not perfect. Only CEO node is showing.And why OnInitializedAsync is not working properly?Could you kindly explain above 3 things to me.Regards,

Balavignesh RaviChandran · Answer

Hi Lee,To clarify, the sample we shared earlier was intended to confirm whether we correctly understood the issues you are experiencing. We aimed to replicate the behavior based on your description.Could you kindly elaborate further on the following points to help us investigate and provide an effective solution?Printing the whole node: Could you clarify what you mean by "printing the whole node is not supportive"? Are you referring to exporting the entire diagram as a printable layout, or is the issue specific to a particular node's visibility during printing? From our side, the diagram's print method successfully prints the rendered nodes properly. Please refer to the following documentation for steps on printing using the diagram’s print method: Printing in Blazor Diagram Component | SyncfusionOnly the CEO node is showing: The issue occurs due to the type difference of ID and Parent ID. Note:
Make sure that the ID and ParentID values are of string type and maintain a proper parent-child relationship.https://blazor.syncfusion.com/documentation/diagram/data-binding#how-to-specify-parent-child-relationship-in-datasource Here we have shared a working sample with the code you provided, which we used to replicate.OnInitializedAsync behavior: We didn’t encounter any issues while initializing the data source on OnInitializedAsync. If your scenario differs or requires additional changes, please provide a working sample replicating the issue or make changes to the shared sample and share it with us.Please confirm whether your issue aligns with our findings or share further details so we can assist you better.Attachment: SF195635_ead25224.zip