diff --git a/KB-Samples/MultiplePorts/App.razor b/KB-Samples/MultiplePorts/App.razor
new file mode 100644
index 00000000..1b890400
--- /dev/null
+++ b/KB-Samples/MultiplePorts/App.razor
@@ -0,0 +1,13 @@
+@namespace MultiplePorts
+
+
+
+
+
+
+ Not found
+
+
Sorry, there's nothing at this address.
+
+
+
diff --git a/KB-Samples/MultiplePorts/MainLayout.razor b/KB-Samples/MultiplePorts/MainLayout.razor
new file mode 100644
index 00000000..c73d0e9b
--- /dev/null
+++ b/KB-Samples/MultiplePorts/MainLayout.razor
@@ -0,0 +1,3 @@
+@inherits LayoutComponentBase
+@namespace MultiplePorts
+ @Body
diff --git a/KB-Samples/MultiplePorts/MultiplePorts_NET6.csproj b/KB-Samples/MultiplePorts/MultiplePorts_NET6.csproj
new file mode 100644
index 00000000..7b44ed9f
--- /dev/null
+++ b/KB-Samples/MultiplePorts/MultiplePorts_NET6.csproj
@@ -0,0 +1,12 @@
+
+
+
+ net6.0
+ enable
+ enable
+
+
+
+
+
+
\ No newline at end of file
diff --git a/KB-Samples/MultiplePorts/MultiplePorts_NET8.csproj b/KB-Samples/MultiplePorts/MultiplePorts_NET8.csproj
new file mode 100644
index 00000000..3c5230c5
--- /dev/null
+++ b/KB-Samples/MultiplePorts/MultiplePorts_NET8.csproj
@@ -0,0 +1,12 @@
+
+
+
+ net8.0
+ enable
+ enable
+
+
+
+
+
+
\ No newline at end of file
diff --git a/KB-Samples/MultiplePorts/Pages/Index.razor b/KB-Samples/MultiplePorts/Pages/Index.razor
new file mode 100644
index 00000000..df1b0c08
--- /dev/null
+++ b/KB-Samples/MultiplePorts/Pages/Index.razor
@@ -0,0 +1,74 @@
+@page "/"
+
+@using Syncfusion.Blazor.Diagram
+
+
+
+@code {
+ DiagramObjectCollection nodes;
+
+ protected override void OnInitialized()
+ {
+ nodes = new DiagramObjectCollection();
+
+ // Create a node and add ports to all sides.
+ Node node = new Node()
+ {
+ OffsetX = 250,
+ OffsetY = 250,
+ Width = 100,
+ Height = 100,
+ Style = new ShapeStyle() { Fill = "#6495ED", StrokeColor = "white" },
+ Ports = new DiagramObjectCollection()
+ {
+ // Port on the left side.
+ new PointPort()
+ {
+ ID = "leftPort",
+ Offset = new DiagramPoint() { X = 0, Y = 0.5 },
+ Visibility = PortVisibility.Visible,
+ Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" },
+ Width = 12,
+ Height = 12,
+ Shape = PortShapes.Square
+ },
+ // Port on the right side.
+ new PointPort()
+ {
+ ID = "rightPort",
+ Offset = new DiagramPoint() { X = 1, Y = 0.5 },
+ Visibility = PortVisibility.Visible,
+ Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" },
+ Width = 12,
+ Height = 12,
+ Shape = PortShapes.Square
+ },
+ // Port on the top side.
+ new PointPort()
+ {
+ ID = "topPort",
+ Offset = new DiagramPoint() { X = 0.5, Y = 0 },
+ Visibility = PortVisibility.Visible,
+ Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" },
+ Width = 12,
+ Height = 12,
+ Shape = PortShapes.Square
+ },
+ // Port on the bottom side.
+ new PointPort()
+ {
+ ID = "bottomPort",
+ Offset = new DiagramPoint() { X = 0.5, Y = 1 },
+ Visibility = PortVisibility.Visible,
+ Style = new ShapeStyle() { Fill = "gray", StrokeColor = "black" },
+ Width = 12,
+ Height = 12,
+ Shape = PortShapes.Square
+ }
+ }
+ };
+
+ // Add the node to the collection.
+ nodes.Add(node);
+ }
+}
diff --git a/KB-Samples/MultiplePorts/Pages/_Host.cshtml b/KB-Samples/MultiplePorts/Pages/_Host.cshtml
new file mode 100644
index 00000000..efa96298
--- /dev/null
+++ b/KB-Samples/MultiplePorts/Pages/_Host.cshtml
@@ -0,0 +1,32 @@
+@page "/"
+@using Microsoft.AspNetCore.Components.Web
+@namespace MultiplePorts.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ An error has occurred. This application may no longer respond until reloaded.
+
+
+ An unhandled exception has occurred. See browser dev tools for details.
+
+ Reload
+ 🗙
+
+
+ An error has occurred. This application may no longer respond until reloaded.
+
+
+ An unhandled exception has occurred. See browser dev tools for details.
+
+ Reload
+ 🗙
+
+@*End:Hidden*@
+
+@code{
+
+ DiagramSize SymbolDragPreviewSize;
+
+ private void Drop(DropEventArgs args)
+ {
+ if (args.Position.X > 400)
+ {
+ args.Cancel = true;
+
+ }
+ }
+
+
+ double symbolSizeWidth;
+ double symbolSizeHeight;
+
+ SfDiagramComponent DInstance;
+ SfDiagramComponent DInstance1;
+ DiagramObjectCollection Dnodes = new DiagramObjectCollection();
+ DiagramObjectCollection Dconnectors = new DiagramObjectCollection();
+ DiagramObjectCollection Dnodes1 = new DiagramObjectCollection();
+ DiagramObjectCollection Dconnectors1 = new DiagramObjectCollection();
+
+ SfSymbolPaletteComponent PaletteInstance;
+ DiagramObjectCollection Palettes = new DiagramObjectCollection();
+
+ DiagramObjectCollection nodes = new DiagramObjectCollection();
+ DiagramObjectCollection Tnodes = new DiagramObjectCollection();
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ PaletteInstance.Targets = new DiagramObjectCollection() { };
+ PaletteInstance.Targets.Add(DInstance);
+ PaletteInstance.Targets.Add(DInstance1);
+ }
+ protected override void OnInitialized()
+ {
+ SymbolDragPreviewSize = new DiagramSize();
+ SymbolDragPreviewSize.Width = 80;
+ SymbolDragPreviewSize.Height = 80;
+ //SymbolMargin.lef
+ symbolSizeWidth = 50;
+ symbolSizeHeight = 50;
+
+ Tnodes = new DiagramObjectCollection();
+
+
+
+ Node Tnode2 = new Node()
+ { ID = "node1", Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Decision } };
+ Tnodes.Add(Tnode2);
+
+ Node Tnode3 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Document } };
+ Tnodes.Add(Tnode3);
+ Node Tnode4 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.PreDefinedProcess } };
+ Tnodes.Add(Tnode4);
+ Node Tnode5 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Terminator } };
+ Tnodes.Add(Tnode5);
+ Node Tnode6 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.PaperTap } };
+ Tnodes.Add(Tnode6);
+ Node Tnode7 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.DirectData } };
+ Tnodes.Add(Tnode7);
+ Node Tnode8 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.SequentialData } };
+ Tnodes.Add(Tnode8);
+ Node Tnode9 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Sort } };
+ Tnodes.Add(Tnode9);
+ Node Tnode10 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.MultiDocument } };
+ Tnodes.Add(Tnode10);
+ Node Tnode11 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Collate } };
+ Tnodes.Add(Tnode11);
+ Node Tnode12 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.SummingJunction } };
+ Tnodes.Add(Tnode12);
+ Node Tnode13 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Or } };
+ Tnodes.Add(Tnode13);
+ Node Tnode14 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.InternalStorage } };
+ Tnodes.Add(Tnode14);
+ Node Tnode15 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Extract } };
+ Tnodes.Add(Tnode15);
+ Node Tnode16 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.ManualOperation } };
+ Tnodes.Add(Tnode16);
+ Node Tnode17 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Merge } };
+ Tnodes.Add(Tnode17);
+ Node Tnode18 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.OffPageReference } };
+ Tnodes.Add(Tnode18);
+ Node Tnode19 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.SequentialAccessStorage } };
+ Tnodes.Add(Tnode19);
+ Node Tnode20 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Annotation } };
+ Tnodes.Add(Tnode20);
+ Node Tnode22 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Data } };
+ Tnodes.Add(Tnode22);
+ Node Tnode23 = new Node()
+ { Shape = new FlowShape() { Type = NodeShapes.Flow, Shape = NodeFlowShapes.Card } };
+ Tnodes.Add(Tnode23);
+
+ Palettes = new DiagramObjectCollection()
+{
+ new Palette(){Symbols =Tnodes,Title="Flow Shapes",ID ="Flow Shapes" },
+
+ };
+ } }
diff --git a/KB-Samples/TwoDiagramOnePalette/Pages/_Host.cshtml b/KB-Samples/TwoDiagramOnePalette/Pages/_Host.cshtml
new file mode 100644
index 00000000..e6dec86b
--- /dev/null
+++ b/KB-Samples/TwoDiagramOnePalette/Pages/_Host.cshtml
@@ -0,0 +1,32 @@
+@page "/"
+@using Microsoft.AspNetCore.Components.Web
+@namespace TwoDiagramOnePalette.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ An error has occurred. This application may no longer respond until reloaded.
+
+
+ An unhandled exception has occurred. See browser dev tools for details.
+
+ Reload
+ 🗙
+