Skip to content

Commit eba00d0

Browse files
RamyaSubramaniSF4537RamyaSubramaniSF4537
committed
1007133: Updated the sample
1 parent ad0836d commit eba00d0

34 files changed

Lines changed: 1067 additions & 272 deletions

‎Diagram/Server/Pages/DataBinding/DiagramWithCustomAdaptor.razor‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111
<button class="btn btn-primary" @onclick="Read">Read</button>
1212
</div>
1313
<div class="col-md-3">
14-
<button class="btn btn-primary" @onclick="Update">Update</button>
14+
<button class="btn btn-primary" @onclick="UpdateAsync">Update</button>
1515
</div>
1616
<div class="col-md-3">
17-
<button class="btn btn-primary" @onclick="Insert">Insert</button>
17+
<button class="btn btn-primary" @onclick="InsertAsync">Insert</button>
1818
</div>
1919
<div class="col-md-3">
20-
<button class="btn btn-primary" @onclick="Delete">Delete</button>
20+
<button class="btn btn-primary" @onclick="DeleteAsync">Delete</button>
2121
</div>
2222
</div>
2323
</div>
@@ -26,7 +26,7 @@
2626
<div class="row" id="diagram">
2727
<div class="col-md-10">
2828
<div id="diagram-space" class="content-wrapper">
29-
<SfDiagramComponent ID="diagramControl" @ref="@diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
29+
<SfDiagramComponent ID="diagramControl" @ref="@_diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
3030
<DataSourceSettings ID="EmployeeID" ParentID="ReportsTo">
3131
<SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>
3232
</DataSourceSettings>
@@ -38,10 +38,10 @@
3838

3939
@functions
4040
{
41-
private SfDiagramComponent? diagram;
42-
private static List<EmployeeDetails> employeeDetails { get; set; }
43-
private static List<EmployeeDetails> Details { get; set; } = new List<EmployeeDetails>();
44-
private Layout LayoutValue = new Layout() { };
41+
private SfDiagramComponent? _diagram;
42+
private static List<EmployeeDetails> _employeeDetails { get; set; }
43+
private static List<EmployeeDetails> _details { get; set; } = new List<EmployeeDetails>();
44+
private Layout _layoutValue = new Layout() { };
4545

4646
private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
4747
{
@@ -86,8 +86,8 @@
8686

8787
protected override void OnInitialized()
8888
{
89-
Details = new List<EmployeeDetails>();
90-
employeeDetails = new List<EmployeeDetails>() {
89+
_details = new List<EmployeeDetails>();
90+
_employeeDetails = new List<EmployeeDetails>() {
9191
new EmployeeDetails { EmployeeID = "1", FirstName = "Andrew", Designation = "CEO", Country = "England", ReportsTo = "", Color = "Red" },
9292
new EmployeeDetails { EmployeeID = "2", FirstName = "Nancy", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" },
9393
new EmployeeDetails { EmployeeID = "3", FirstName = "Janet", Designation = "Product Manager", Country = "USA", ReportsTo = "1", Color = "Blue" },
@@ -116,7 +116,7 @@
116116
// Performs data Read operation
117117
public override object Read(DataManagerRequest dm, string key = null)
118118
{
119-
IEnumerable<EmployeeDetails> DataSource = employeeDetails;
119+
IEnumerable<EmployeeDetails> DataSource = _employeeDetails;
120120
if (dm.Search != null && dm.Search.Count > 0)
121121
{
122122
// Searching
@@ -148,21 +148,21 @@
148148
// Performs Insert operation
149149
public override object Insert(DataManager dm, object value, string key)
150150
{
151-
employeeDetails.Insert(employeeDetails.Count, value as EmployeeDetails);
151+
_employeeDetails.Insert(_employeeDetails.Count, value as EmployeeDetails);
152152
return value;
153153
}
154154

155155
// Performs Remove operation
156156
public override object Remove(DataManager dm, object value, string keyField, string key)
157157
{
158-
employeeDetails.Remove(employeeDetails.Where(or => or.EmployeeID == value.ToString()).FirstOrDefault());
158+
_employeeDetails.Remove(_employeeDetails.Where(or => or.EmployeeID == value.ToString()).FirstOrDefault());
159159
return value;
160160
}
161161

162162
// Performs Update operation
163163
public override object Update(DataManager dm, object value, string keyField, string key)
164164
{
165-
var data = employeeDetails.Where(or => or.EmployeeID == (value as EmployeeDetails).EmployeeID).FirstOrDefault();
165+
var data = _employeeDetails.Where(or => or.EmployeeID == (value as EmployeeDetails).EmployeeID).FirstOrDefault();
166166
if (data != null)
167167
{
168168
data.EmployeeID = (value as EmployeeDetails).EmployeeID;
@@ -179,17 +179,17 @@
179179

180180
private void Read()
181181
{
182-
Details = new List<EmployeeDetails>();
183-
Details = diagram.ReadDataAsync().Result as List<EmployeeDetails>;
182+
_details = new List<EmployeeDetails>();
183+
_details = _diagram.ReadDataAsync().Result as List<EmployeeDetails>;
184184
}
185185

186-
private async void Update()
186+
private async void UpdateAsync()
187187
{
188188
EmployeeDetails employeeDetails = new EmployeeDetails { EmployeeID = "1", FirstName = "AndrewSimonds", Designation = "CEO", Country = "Australia", ReportsTo = "", Color = "Red" };
189-
await diagram.UpdateDataAsync("EmployeeID", employeeDetails);
189+
await _diagram.UpdateDataAsync("EmployeeID", employeeDetails);
190190
}
191191

192-
private async void Insert()
192+
private async void InsertAsync()
193193
{
194194
EmployeeDetails employeeDetails = new EmployeeDetails()
195195
{
@@ -200,12 +200,12 @@
200200
ReportsTo = "6",
201201
Color = "Purple"
202202
};
203-
await diagram.InsertDataAsync(employeeDetails);
203+
await _diagram.InsertDataAsync(employeeDetails);
204204

205205
}
206206

207-
private async void Delete()
207+
private async void DeleteAsync()
208208
{
209-
await diagram.DeleteDataAsync("EmployeeID", "6");
209+
await _diagram.DeleteDataAsync("EmployeeID", "6");
210210
}
211211
}

‎Diagram/Server/Pages/DataBinding/DiagramWithRemoteData.razor‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
@page "/DiagramWithRemoteData"
2+
3+
@using Syncfusion.Blazor.Data
4+
@using Syncfusion.Blazor
5+
@using Syncfusion.Blazor.Diagram
6+
7+
@*buttons to perform crud support*@
8+
<div class="row">
9+
<div class="col-md-12">
10+
<div class="row">
11+
<div class="col-md-3">
12+
<button class="btn btn-primary" @onclick="ReadAsync">Read</button>
13+
</div>
14+
<div class="col-md-3">
15+
<button class="btn btn-primary" @onclick="UpdateAsync">Update</button>
16+
</div>
17+
<div class="col-md-3">
18+
<button class="btn btn-primary" @onclick="InsertAsync">Insert</button>
19+
</div>
20+
<div class="col-md-3">
21+
<button class="btn btn-primary" @onclick="DeleteAsync">Delete</button>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
<div id="diagram-space" class="content-wrapper">
27+
<SfDiagramComponent @ref="@_diagram" Width="100%" Height="690px" ConnectorCreating="@ConnectorCreating" NodeCreating="@NodeCreating">
28+
<DataSourceSettings ID="EmployeeID" ParentID="ReportsTo">
29+
<SfDataManager Url="api/Data" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
30+
</DataSourceSettings>
31+
<Layout Type="Syncfusion.Blazor.Diagram.LayoutType.HierarchicalTree" VerticalSpacing="75" HorizontalSpacing="75" GetLayoutInfo="GetLayoutInfo"></Layout>
32+
</SfDiagramComponent>
33+
34+
</div>
35+
@functions{
36+
private SfDiagramComponent? _diagram;
37+
private Layout _layoutValue = new Layout() { };
38+
private static List<EmployeeDetails> _employeeDetails { get; set; }
39+
40+
private TreeInfo GetLayoutInfo(IDiagramObject obj, TreeInfo options)
41+
{
42+
options.EnableSubTree = true;
43+
options.Orientation = Orientation.Horizontal;
44+
return options;
45+
}
46+
private void NodeCreating(IDiagramObject obj)
47+
{
48+
Node? node = obj as Node;
49+
node.Width = 200;
50+
node.Height = 100;
51+
Dictionary<string, object> data = node.Data as Dictionary<string, object>;
52+
if (data != null)
53+
{
54+
node.Annotations = new DiagramObjectCollection<ShapeAnnotation>()
55+
{
56+
new ShapeAnnotation()
57+
{
58+
Content = $"Name:{data["Name"]}\nReportsTo:{data["ReportsTo"]}\nDesignation:{data["Designation"]}",
59+
}
60+
};
61+
}
62+
}
63+
private void ConnectorCreating(IDiagramObject connector)
64+
{
65+
Connector? newConnector = connector as Connector;
66+
newConnector!.TargetDecorator = new DecoratorSettings() { Shape = DecoratorShape.None };
67+
newConnector.Type = ConnectorSegmentType.Orthogonal;
68+
newConnector.Style = new ShapeStyle() { StrokeColor = "#6d6d6d" };
69+
newConnector.Constraints = ConnectorConstraints.None;
70+
newConnector.CornerRadius = 5;
71+
}
72+
73+
74+
public class EmployeeDetails
75+
{
76+
public int EmployeeID { get; set; }
77+
78+
public string ReportsTo { get; set; }
79+
80+
public string Name { get; set; }
81+
82+
public string Designation { get; set; }
83+
84+
public string Colour { get; set; }
85+
}
86+
87+
88+
public async void ReadAsync()
89+
{
90+
var data = await _diagram.ReadDataAsync();
91+
}
92+
93+
public async void UpdateAsync()
94+
{
95+
EmployeeDetails employeeDetails1 = new EmployeeDetails()
96+
{
97+
EmployeeID = 6,
98+
Name = "Michael",
99+
Designation = "Team Lead",
100+
ReportsTo = "1",
101+
Colour = "Orange"
102+
};
103+
EmployeeDetails employeeDetails = new EmployeeDetails()
104+
{
105+
EmployeeID = 6,
106+
Name = "Michael",
107+
Designation = "Product Manager",
108+
ReportsTo = "1",
109+
Colour = "Green"
110+
};
111+
Dictionary<string, object> propoerties = new Dictionary<string, object>()
112+
{
113+
{"Designation","Product Manager" },
114+
{"Colour","Green" },
115+
{"ReportsTo", "1" }
116+
};
117+
await _diagram.UpdateDataAsync("EmployeeID", employeeDetails, "Employees");
118+
}
119+
120+
121+
public async void InsertAsync()
122+
{
123+
EmployeeDetails employeeDetails = new EmployeeDetails()
124+
{
125+
EmployeeID = 11,
126+
Name = "Alan",
127+
Designation = "HR assistant",
128+
ReportsTo = "9",
129+
Colour = "Gray"
130+
};
131+
await _diagram.InsertDataAsync(employeeDetails, "Employees");
132+
133+
}
134+
135+
public async void DeleteAsync()
136+
{
137+
await _diagram.DeleteDataAsync("EmployeeID", 5);
138+
}
139+
140+
141+
}

‎Diagram/Server/Pages/DataBinding/DynamicObj.razor‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,31 @@
44
@using System.Dynamic
55
@using Syncfusion.Blazor.Diagram
66

7-
<SfDiagramComponent @ref="@Diagram" Height="499px" InteractionController="DiagramInteractions.ZoomPan" ConnectorCreating="@ConnectorDefaults"
7+
<SfDiagramComponent @ref="@_diagram" Height="499px" InteractionController="DiagramInteractions.ZoomPan" ConnectorCreating="@ConnectorDefaults"
88
NodeCreating="@NodeDefaults">
99
<DataSourceSettings ID="Name" ParentID="Category" DataSource="DataSource" />
10-
<Layout @bind-Type="type"
11-
@bind-HorizontalSpacing="@HorizontalSpacing"
12-
@bind-Orientation="@orientation"
13-
@bind-VerticalSpacing="@VerticalSpacing"
14-
@bind-HorizontalAlignment="@horizontalAlignment"
15-
@bind-VerticalAlignment="@verticalAlignment"
10+
<Layout @bind-Type="_type"
11+
@bind-HorizontalSpacing="@_horizontalSpacing"
12+
@bind-Orientation="@_orientation"
13+
@bind-VerticalSpacing="@_verticalSpacing"
14+
@bind-HorizontalAlignment="@_horizontalAlignment"
15+
@bind-VerticalAlignment="@_verticalAlignment"
1616
GetLayoutInfo="GetLayoutInfo">
1717
<LayoutMargin Top="50" Bottom="50" Right="50" Left="50" />
1818
</Layout>
1919
</SfDiagramComponent>
2020

2121
@code
2222
{
23-
private SfDiagramComponent Diagram;
23+
private SfDiagramComponent _diagram;
2424
// Specify the layout type.
25-
private LayoutType type = LayoutType.HierarchicalTree;
25+
private LayoutType _type = LayoutType.HierarchicalTree;
2626
// Specify the orientation of the layout.
27-
private LayoutOrientation orientation = LayoutOrientation.TopToBottom;
28-
private HorizontalAlignment horizontalAlignment = HorizontalAlignment.Auto;
29-
private VerticalAlignment verticalAlignment = VerticalAlignment.Auto;
30-
private int HorizontalSpacing = 30;
31-
private int VerticalSpacing = 30;
27+
private LayoutOrientation _orientation = LayoutOrientation.TopToBottom;
28+
private HorizontalAlignment _horizontalAlignment = HorizontalAlignment.Auto;
29+
private VerticalAlignment _verticalAlignment = VerticalAlignment.Auto;
30+
private int _horizontalSpacing = 30;
31+
private int _verticalSpacing = 30;
3232
private List<HierarchicalDetails> DataSource { get; set; }
3333
private List<HierarchicalDetails> ExpandoData = new List<HierarchicalDetails>();
3434

0 commit comments

Comments
 (0)