1
+ @page " /"
2
+ @using Syncfusion .Blazor .Diagram
3
+ @using Syncfusion .Blazor .Buttons
4
+
5
+ <SfButton Content =" Print" OnClick =" @OnPrint" />
6
+ <SfDiagramComponent Height =" 600px" @ref =" @diagram" NodeCreating =" NodeCreating" ConnectorCreating =" ConnectorCreating" >
7
+ <PageSettings MultiplePage =" true" Width =" @width" Height =" @height" Orientation =" @orientation" ShowPageBreaks =" @showPageBreak" >
8
+ <PageMargin Left =" @left" Right =" @right" Top =" @top" Bottom =" @bottom" ></PageMargin >
9
+ </PageSettings >
10
+ <DataSourceSettings DataSource =" DataSource" ID =" Id" ParentID =" Manager" ></DataSourceSettings >
11
+ <Layout @bind-Type =" type" @bind-HorizontalSpacing =" @HorizontalSpacing" @bind-FixedNode =" @FixedNode" @bind-Orientation =" @oreintation" @bind-VerticalSpacing =" @VerticalSpacing" @bind-HorizontalAlignment =" @horizontalAlignment" @bind-VerticalAlignment =" @verticalAlignment" >
12
+ <LayoutMargin @bind-Top =" @lTop" @bind-Bottom =" @lBottom" @bind-Right =" @lRight" @bind-Left =" @lLeft" ></LayoutMargin >
13
+ </Layout >
14
+ <SnapSettings ></SnapSettings >
15
+ </SfDiagramComponent >
16
+
17
+ @code {
18
+
19
+ // Reference the diagram
20
+ SfDiagramComponent diagram ;
21
+ double left = 10 ;
22
+ double top = 10 ;
23
+ double right = 10 ;
24
+ double bottom = 10 ;
25
+ double width = 410 ;
26
+ double height = 550 ;
27
+
28
+ bool multiplePage = true ;
29
+ bool showPageBreak = true ;
30
+ DiagramPrintExportRegion region = DiagramPrintExportRegion .ClipBounds ;
31
+ PageOrientation orientation = PageOrientation .Landscape ;
32
+ // Method to prin the diagram
33
+ private async Task OnPrint ()
34
+ {
35
+ DiagramPrintSettings print = new DiagramPrintSettings ();
36
+ print .ClipBounds = new DiagramRect () { Height = 300 , Width = 500 , X = 300 , Y = 200 };
37
+ print .Region = region ;
38
+ print .FitToPage = multiplePage ;
39
+ print .Orientation = orientation ;
40
+ await diagram .PrintAsync (print );
41
+ }
42
+
43
+ double lTop = 50 ;
44
+ double lBottom = 50 ;
45
+ double lRight = 50 ;
46
+ double lLeft = 50 ;
47
+ LayoutType type = LayoutType .OrganizationalChart ;
48
+ LayoutOrientation oreintation = LayoutOrientation .TopToBottom ;
49
+ HorizontalAlignment horizontalAlignment = HorizontalAlignment .Auto ;
50
+ VerticalAlignment verticalAlignment = VerticalAlignment .Auto ;
51
+ int HorizontalSpacing = 30 ;
52
+ int VerticalSpacing = 30 ;
53
+ private string FixedNode = null ;
54
+ public class HierarchicalDetails
55
+ {
56
+ public string Id { get ; set ; }
57
+ public string Role { get ; set ; }
58
+ public string Manager { get ; set ; }
59
+ public string ChartType { get ; set ; }
60
+ public string Color { get ; set ; }
61
+ }
62
+ public List <HierarchicalDetails > DataSource = new List <HierarchicalDetails >()
63
+ {
64
+ new HierarchicalDetails () { Id = " parent" , Role = " Board" , Color = " #71AF17" },
65
+ new HierarchicalDetails () { Id = " 1" , Role = " General Manager" , Manager = " parent" , ChartType = " right" , Color = " #71AF17" },
66
+ new HierarchicalDetails () { Id = " 11" , Role = " Assistant Manager" , Manager = " 1" , Color = " #71AF17" },
67
+ new HierarchicalDetails () { Id = " 2" , Role = " Human Resource Manager" , Manager = " 1" , ChartType = " right" , Color = " #1859B7" },
68
+ new HierarchicalDetails () { Id = " 3" , Role = " Trainers" , Manager = " 2" , Color = " #2E95D8" },
69
+ new HierarchicalDetails () { Id = " 4" , Role = " Recruiting Team" , Manager = " 2" , Color = " #2E95D8" },
70
+ new HierarchicalDetails () { Id = " 5" , Role = " Finance Asst. Manager" , Manager = " 2" , Color = " #2E95D8" },
71
+ new HierarchicalDetails () { Id = " 6" , Role = " Design Manager" , Manager = " 1" ,ChartType = " right" , Color = " #1859B7" },
72
+ new HierarchicalDetails () { Id = " 7" , Role = " Design Supervisor" , Manager = " 6" , Color = " #2E95D8" },
73
+ new HierarchicalDetails () { Id = " 8" , Role = " Development Supervisor" , Manager = " 6" , Color = " #2E95D8" },
74
+ new HierarchicalDetails () { Id = " 9" , Role = " Drafting Supervisor" , Manager = " 6" , Color = " #2E95D8" },
75
+ new HierarchicalDetails () { Id = " 10" , Role = " Operation Manager" , Manager = " 1" , ChartType = " right" , Color = " #1859B7" },
76
+ new HierarchicalDetails () { Id = " 11" , Role = " Statistic Department" , Manager = " 10" , Color = " #2E95D8" },
77
+ new HierarchicalDetails () { Id = " 12" , Role = " Logistic Department" , Manager = " 10" , Color = " #2E95D8" },
78
+ new HierarchicalDetails () { Id = " 16" , Role = " Marketing Manager" , Manager = " 1" , ChartType = " right" , Color = " #1859B7" },
79
+ new HierarchicalDetails () { Id = " 17" , Role = " Oversea sales Manager" , Manager = " 16" , Color = " #2E95D8" },
80
+ new HierarchicalDetails () { Id = " 18" , Role = " Petroleum Manager" , Manager = " 16" , Color = " #2E95D8" },
81
+ new HierarchicalDetails () { Id = " 20" , Role = " Service Dept. Manager" , Manager = " 16" , Color = " #2E95D8" },
82
+ new HierarchicalDetails () { Id = " 21" , Role = " Quality Department" , Manager = " 16" , Color = " #2E95D8" }
83
+
84
+ };
85
+
86
+ private void NodeCreating (IDiagramObject obj )
87
+ {
88
+ Node node = obj as Node ;
89
+ if (node .Data is System .Text .Json .JsonElement )
90
+ {
91
+ node .Data = System .Text .Json .JsonSerializer .Deserialize <HierarchicalDetails >(node .Data .ToString ());
92
+ }
93
+ HierarchicalDetails hierarchicalData = node .Data as HierarchicalDetails ;
94
+ node .Width = 150 ;
95
+ node .Height = 50 ;
96
+ node .Style .Fill = hierarchicalData .Color ;
97
+ // node.IsVisible = false;
98
+ node .Annotations = new DiagramObjectCollection <ShapeAnnotation >()
99
+ {
100
+ new ShapeAnnotation ()
101
+ {
102
+ Content = hierarchicalData .Role ,
103
+ Style = new TextStyle (){Color = " white" }
104
+ }
105
+ };
106
+ }
107
+ private void ConnectorCreating (IDiagramObject connector )
108
+ {
109
+ (connector as Connector ).Type = ConnectorSegmentType .Orthogonal ;
110
+ (connector as Connector ).TargetDecorator .Shape = DecoratorShape .None ;
111
+ }
112
+ }
0 commit comments