diff --git a/KB-Samples/DiagramInDialog/DiagramInDialog/App.razor b/KB-Samples/DiagramInDialog/DiagramInDialog/App.razor
new file mode 100644
index 00000000..221ec128
--- /dev/null
+++ b/KB-Samples/DiagramInDialog/DiagramInDialog/App.razor
@@ -0,0 +1,13 @@
+@namespace DiagramInDialog
+
+
+
+
+
+
+ Not found
+
+ Sorry, there's nothing at this address.
+
+
+
diff --git a/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET8.csproj b/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET8.csproj
new file mode 100644
index 00000000..81dc84cb
--- /dev/null
+++ b/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET8.csproj
@@ -0,0 +1,14 @@
+
+
+
+ net8.0
+ enable
+ enable
+
+
+
+
+
+
+
+
diff --git a/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET8.csproj.user b/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET8.csproj.user
new file mode 100644
index 00000000..9ff5820a
--- /dev/null
+++ b/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET8.csproj.user
@@ -0,0 +1,6 @@
+
+
+
+ https
+
+
\ No newline at end of file
diff --git a/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET9.csproj b/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET9.csproj
new file mode 100644
index 00000000..3a9de092
--- /dev/null
+++ b/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET9.csproj
@@ -0,0 +1,14 @@
+
+
+
+ net9.0
+ enable
+ enable
+
+
+
+
+
+
+
+
diff --git a/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET9.csproj.user b/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET9.csproj.user
new file mode 100644
index 00000000..9ff5820a
--- /dev/null
+++ b/KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET9.csproj.user
@@ -0,0 +1,6 @@
+
+
+
+ https
+
+
\ No newline at end of file
diff --git a/KB-Samples/DiagramInDialog/DiagramInDialog/MainLayout.razor b/KB-Samples/DiagramInDialog/DiagramInDialog/MainLayout.razor
new file mode 100644
index 00000000..ad2343a2
--- /dev/null
+++ b/KB-Samples/DiagramInDialog/DiagramInDialog/MainLayout.razor
@@ -0,0 +1,3 @@
+@inherits LayoutComponentBase
+@namespace DiagramInDialog
+ @Body
diff --git a/KB-Samples/DiagramInDialog/DiagramInDialog/Pages/Index.razor b/KB-Samples/DiagramInDialog/DiagramInDialog/Pages/Index.razor
new file mode 100644
index 00000000..373a91b6
--- /dev/null
+++ b/KB-Samples/DiagramInDialog/DiagramInDialog/Pages/Index.razor
@@ -0,0 +1,132 @@
+@page "/"
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Popups
+@using Syncfusion.Blazor.Diagram
+@using System.Collections.ObjectModel
+@inject IJSRuntime jsRuntime;
+
+
+ Open Diagram Dialog
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfDialog _dialog;
+ private SfDiagramComponent Diagram;
+
+ private bool IsDialogVisible = false;
+
+ private int HorizontalSpacing { get; set; } = 50;
+ private int VerticalSpacing { get; set; } = 50;
+ bool open = false;
+ public ObservableCollection DataSource { get; set; } = new()
+ {
+ new DiagramData { Id = "1", ParentId = "", Label = "CEO" },
+ new DiagramData { Id = "2", ParentId = "1", Label = "Manager" },
+ new DiagramData { Id = "3", ParentId = "2", Label = "Team Lead" },
+ new DiagramData { Id = "4", ParentId = "3", Label = "Senior Developer" },
+ new DiagramData { Id = "5", ParentId = "4", Label = "Developer" },
+ new DiagramData { Id = "6", ParentId = "5", Label = "Fresher" }
+ };
+
+ public class DiagramData
+ {
+ public string Id { get; set; }
+ public string ParentId { get; set; }
+ public string Label { get; set; }
+ }
+
+ private async Task ShowDialog()
+ {
+ IsDialogVisible = true;
+ }
+ private async Task OpenDialog(BeforeOpenEventArgs args)
+ {
+ await jsRuntime.InvokeAsync