Skip to content

Commit 9571e57

Browse files
RamyaSubramaniSF4537RamyaSubramaniSF4537
committed
Revamping the Ug
1 parent 93b107e commit 9571e57

File tree

8 files changed

+84
-7
lines changed

8 files changed

+84
-7
lines changed

‎blazor/diagram/export.md‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,9 @@ Diagram provides support to export the diagram as image or SVG files. The follow
4747
}
4848
}
4949
```
50-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/Export)
50+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVSsXjPKcQBMSRD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
51+
52+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/Export)
5153

5254
## Exporting Options
5355

@@ -81,6 +83,8 @@ Diagram provides support to export the desired region of the diagram to the desi
8183
}
8284
}
8385
```
86+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVICZDlgwcGbHBb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
87+
8488
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportOption)
8589

8690
### How to Customize Page Size
@@ -109,6 +113,8 @@ Diagram provides support to change the page size. The page size can be adjusted
109113
}
110114
}
111115
```
116+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBesNNFgwFiDfWu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
117+
112118
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportWithPageSize)
113119

114120
### How to Add Margin Around Exported Diagram Image
@@ -141,6 +147,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
141147
}
142148
}
143149
```
150+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryCjZvAmvTSrzu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
151+
144152
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportMargin)
145153

146154
### How to Export Diagrams by Region
@@ -180,6 +188,8 @@ The following code example illustrates how to export the diagram based on page s
180188
}
181189
}
182190
```
191+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSiXtvUwbliLpo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
192+
183193
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportRegion)
184194

185195
### How to Export Diagram with Custom Bounds
@@ -212,6 +222,8 @@ The following code example illustrates how to export the region specified in the
212222
}
213223
}
214224
```
225+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZresXjFUwYAvcER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
226+
215227
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportClipBounds)
216228

217229
### How to Export Diagram as Single or Multiple Pages
@@ -251,6 +263,8 @@ The following code example illustrates how to export the diagram to a single pag
251263
}
252264
}
253265
```
266+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBoMtjbgwaFojuu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
267+
254268
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Export/ExportWithPage)
255269

256270
### How to Change Orientation at Runtime

‎blazor/diagram/flip.md‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ The following code example shows how to flip the node.
109109
ID = "node1",
110110
Width = 100,
111111
Height = 100,
112-
OffsetX = 700,
112+
OffsetX = 200,
113113
OffsetY = 100,
114114
Flip = FlipDirection.Horizontal,
115115
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
@@ -146,7 +146,7 @@ The following code example shows how to flip the node.
146146
ID = "node2",
147147
Width = 100,
148148
Height = 100,
149-
OffsetX = 900,
149+
OffsetX = 400,
150150
OffsetY = 100,
151151
Flip = FlipDirection.Horizontal,
152152
FlipMode = DiagramFlipMode.Port,
@@ -218,6 +218,8 @@ The following code example shows how to flip the node.
218218
219219
}
220220
```
221+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrysNtlgEhFRKGy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
222+
221223
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Flip/FlipDirection)
222224

223225

@@ -331,7 +333,7 @@ The following code example shows how to flip the group.
331333
ID = "node3",
332334
Width = 100,
333335
Height = 60,
334-
OffsetX = 500,
336+
OffsetX = 200,
335337
OffsetY = 300,
336338
Annotations = new DiagramObjectCollection<ShapeAnnotation>()
337339
{
@@ -367,7 +369,7 @@ The following code example shows how to flip the group.
367369
ID = "node4",
368370
Width = 100,
369371
Height = 60,
370-
OffsetX = 700,
372+
OffsetX = 400,
371373
OffsetY = 400,
372374
Style = new ShapeStyle()
373375
{
@@ -463,6 +465,8 @@ The following code example shows how to flip the group.
463465
}
464466
}
465467
```
468+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBeiZDvgaptrZdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
469+
466470
For more information about node interaction, refer to [Node Interaction](./nodes/interaction).
467471
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Flip/FlipGroup)
468472

@@ -552,6 +556,7 @@ The following code example shows how to flip the connector.
552556
}
553557
}
554558
```
559+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiDXPgupyReCL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
555560

556561
| FlipDirection | Output|
557562
| -------- | -------- |

‎blazor/diagram/getting-started-with-maui-app.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,8 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Diagram component in th
511511
{% endhighlight %}
512512
{% endtabs %}
513513

514+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyCjDPUkdgrQsk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
515+
514516
N> [View the Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DiagramComponent/BlazorMAUIApp/DiagramSample).
515517

516518
## How to Run the Sample on Windows

‎blazor/diagram/grid-lines.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
5151
}
5252
}
5353
```
54+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VthoitNvgOEsjvmF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
55+
5456
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomGridline)
5557

5658
![GridLines in Blazor Diagram](images/blazor-diagram-gridlines.png)
@@ -81,6 +83,8 @@ The following code example illustrates how to customize the appearance of gridli
8183
</SnapSettings>
8284
</SfDiagramComponent>
8385
```
86+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LthSstjFquOSqpGo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
87+
8488
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/Appearance)
8589

8690

@@ -110,6 +114,8 @@ The appearance of the grid lines can be changed into dots by using the [GridType
110114
}
111115
112116
```
117+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeCjDFUEuuwDSA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
118+
113119
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomizeGridline)
114120

115121

@@ -143,6 +149,8 @@ The following code example illustrates how to customize the thickness of lines a
143149
};
144150
}
145151
```
152+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDByMjjlTDjqLjhz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
153+
146154
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/LineInterval)
147155

148156

@@ -183,6 +191,8 @@ Snapping to gridlines can be enabled or disabled with the [SnapConstraints](http
183191
}
184192
}
185193
```
194+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIsZtFpZDwzFgS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
195+
186196
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/SnapToLines)
187197

188198

@@ -230,6 +240,8 @@ By default, objects snapped towards the nearest gridline. The gridline or positi
230240
}
231241
}
232242
```
243+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroCZtbTNsMUXqH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
244+
233245
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomizeSnapInterval)
234246

235247

@@ -280,6 +292,8 @@ The snap to object provides visual cues to assist with aligning and spacing diag
280292
}
281293
}
282294
```
295+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeWZtPJtixDcGj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
296+
283297
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/SnapToObject)
284298

285299

@@ -327,6 +341,8 @@ The following code example illustrates how to customize the snap line style.
327341
}
328342
}
329343
```
344+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVSiXZbfDrShrCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
345+
330346
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/SnapLineStyle)
331347

332348

‎blazor/diagram/group.md‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,8 @@ To create a group using Nodes and Connectors in the Blazor Diagram, refer to the
100100
}
101101
}
102102
```
103+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeWZjlTtUfyBOf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
104+
103105
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/CreateGroup)
104106
![Grouping in Blazor Diagram](images/blazor-diagram-grouping.png)
105107

@@ -168,7 +170,9 @@ The following code illustrates how to ungroup at runtime.
168170
}
169171
}
170172
```
171-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/UnGroup)
173+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBoWZZvfZpAdhre?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
174+
175+
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/UnGroup)
172176

173177

174178
>**Note:** A NodeGroup ID should not start with numbers or special characters and should not contain special characters such as underscore(_) or space.
@@ -183,7 +187,7 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
183187
184188
185189
<SfButton Content="CloneGroup" OnClick="@CloneGroup" />
186-
<SfDiagramComponent @ref="diagram" Width="50%" Height="500px" @bind-Nodes="NodeCollection"></SfDiagramComponent>
190+
<SfDiagramComponent @ref="diagram" Width="80%" Height="500px" @bind-Nodes="NodeCollection"></SfDiagramComponent>
187191
188192
@functions
189193
{
@@ -255,6 +259,8 @@ You can download a complete working sample from [GitHub](https://github.com/Sync
255259
256260
}
257261
```
262+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVeCDNPfjyioMFP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
263+
258264
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/CloneNodeGroup)
259265
![Grouping in Blazor Diagram](images/CloneGroup.gif)
260266

@@ -318,6 +324,8 @@ The following code illustrates how to add padding to a node group.
318324
}
319325
}
320326
```
327+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjryCDZlzjyxnaIR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
328+
321329
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/CreateGroup)
322330

323331
![Padding in Blazor Diagram](images/GroupPadding.png)
@@ -387,6 +395,8 @@ The following code illustrates how a node group is added at runtime.
387395
}
388396
}
389397
```
398+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBeWtNPpDntLeoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
399+
390400
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/AddGroupAtRunTime)
391401
* Also, Add the child to the node group through the [AddChildAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddChildAsync_Syncfusion_Blazor_Diagram_NodeGroup_Syncfusion_Blazor_Diagram_NodeBase_) method. The following code illustrates how to add child to the existing node group through the AddChildAsync method.
392402

@@ -474,6 +484,8 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
474484
}
475485
}
476486
```
487+
{% previewsample "https://blazorplayground.syncfusion.com/embed/htLysNDlpXdPhsab?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
488+
477489
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/AddChildMethod)
478490

479491
## How to Update Node Group Position at Runtime
@@ -542,6 +554,8 @@ Change the position of the node group similar to a node. For more information ab
542554
}
543555
}
544556
```
557+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLIiDZbzDGhrbJg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
558+
545559
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/UpdatePositionForGroup)
546560

547561
## How to Customize Node Group Appearance

‎blazor/diagram/page-settings.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ To learn more about customization of diagram page, refer to the below video link
6363
public PageOrientation orientation = PageOrientation.Landscape;
6464
}
6565
```
66+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVyCZNFzDEIdtnt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
67+
6668
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/PageAppearance)
6769

6870
|Orientation|Output|
@@ -112,6 +114,8 @@ Based on the diagramming element position, the size of the page dynamically incr
112114
}
113115
}
114116
```
117+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjheCNNvpCCugjmh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
118+
115119
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/MultiplePage)
116120

117121
![Multiple Page](./images/MultiplePage.png)
@@ -167,6 +171,8 @@ Customize page appearance using the `PageSettings` properties:
167171
public PageOrientation orientation = PageOrientation.Landscape;
168172
}
169173
```
174+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSCXXlzWrgqfQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
175+
170176
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/PageAppearance)
171177

172178
![PageBackground Color](./images/PageBackground.png)
@@ -200,6 +206,8 @@ Refer to the following code example on how to change the stroke, stroke-dasharra
200206
</PageSettings>
201207
</SfDiagramComponent>
202208
```
209+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSMtXvJMhbUAKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
210+
203211
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/PageBreak)
204212

205213
![Pagebreak Color](./images/Pagebreak.png)
@@ -222,6 +230,8 @@ The area between the maintain content of a page and the page edges can be change
222230
</PageSettings>
223231
</SfDiagramComponent>
224232
```
233+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhSWXDFfMKLYgqD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
234+
225235
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/Margin)
226236

227237
## How to Restrict Node Interaction Using Boundary Constraints
@@ -290,6 +300,8 @@ The following code example illustrates how to define boundary constraints with r
290300
}
291301
}
292302
```
303+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLSMtXPJiKwzUSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
304+
293305
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/BoundaryConstraints)
294306

295307
## How to Make Responsive with Parent Container
@@ -323,6 +335,8 @@ The following code example illustrates how to set width and height in percentage
323335
}
324336
}
325337
```
338+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLSsZXvzCpMgFtp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
339+
326340
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/ResponsiveWithParentContainer)
327341

328342
## How to Handle Page Settings Property Changes Using Callback Methods
@@ -353,6 +367,7 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
353367
}
354368
}
355369
```
370+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBSsNtlfWfSvDNB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
356371

357372
## See also
358373

‎blazor/diagram/print.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ The following code example illustrates how to print the region occupied by the d
7777
}
7878
}
7979
```
80+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBoCNXPziyzzRgP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
81+
8082
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Print/PrintSample/PrintSample)
8183

8284
The following code example illustrates how to print a selected region in the diagram using clip bounds.
@@ -194,6 +196,8 @@ The following code example illustrates how to print a selected region in the dia
194196
}
195197
}
196198
```
199+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLoMXXbpCREFrTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
200+
197201
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Print/PrintUsingClipBounds/PrintUsingClipBounds)
198202

199203
## See Also

0 commit comments

Comments
 (0)