Skip to content

Commit 8dd471e

Browse files
Keerthivasan-RamamoorthyKeerthivasan-Ramamoorthy
authored
Merge pull request #137 from Jawin-SF4519/ES963343-DiagramInDialog
963343: Render Diagram when opens Dialog
2 parents 0a559ba + 56d38bd commit 8dd471e

15 files changed

+338
-0
lines changed

‎KB-Samples/DiagramInDialog/DiagramInDialog/App.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@namespace DiagramInDialog
2+
<Router AppAssembly="@typeof(App).Assembly">
3+
<Found Context="routeData">
4+
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
5+
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
6+
</Found>
7+
<NotFound>
8+
<PageTitle>Not found</PageTitle>
9+
<LayoutView Layout="@typeof(MainLayout)">
10+
<p role="alert">Sorry, there's nothing at this address.</p>
11+
</LayoutView>
12+
</NotFound>
13+
</Router>

‎KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET8.csproj‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net8.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<PackageReference Include="Syncfusion.Blazor.Diagram" Version="*" />
11+
<PackageReference Include="Syncfusion.Blazor.Themes" Version="*" />
12+
</ItemGroup>
13+
14+
</Project>

‎KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET8.csproj.user‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<PropertyGroup>
4+
<ActiveDebugProfile>https</ActiveDebugProfile>
5+
</PropertyGroup>
6+
</Project>

‎KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET9.csproj‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>net9.0</TargetFramework>
5+
<Nullable>enable</Nullable>
6+
<ImplicitUsings>enable</ImplicitUsings>
7+
</PropertyGroup>
8+
9+
<ItemGroup>
10+
<PackageReference Include="Syncfusion.Blazor.Diagram" Version="*" />
11+
<PackageReference Include="Syncfusion.Blazor.Themes" Version="*" />
12+
</ItemGroup>
13+
14+
</Project>

‎KB-Samples/DiagramInDialog/DiagramInDialog/DiagramInDialog_NET9.csproj.user‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<PropertyGroup>
4+
<ActiveDebugProfile>https</ActiveDebugProfile>
5+
</PropertyGroup>
6+
</Project>

‎KB-Samples/DiagramInDialog/DiagramInDialog/MainLayout.razor‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@inherits LayoutComponentBase
2+
@namespace DiagramInDialog
3+
<main> @Body </main>

‎KB-Samples/DiagramInDialog/DiagramInDialog/Pages/Index.razor‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
@page "/"
2+
3+
@using Syncfusion.Blazor.Buttons
4+
@using Syncfusion.Blazor.Popups
5+
@using Syncfusion.Blazor.Diagram
6+
@using System.Collections.ObjectModel
7+
@inject IJSRuntime jsRuntime;
8+
9+
<div id="target" style="height:100%">
10+
<SfButton CssClass="e-primary" @onclick="ShowDialog">Open Diagram Dialog</SfButton>
11+
</div>
12+
13+
<SfDialog ShowCloseIcon="true"
14+
Width="707px"
15+
Height="1000px"
16+
IsModal="true"
17+
Target="#target"
18+
AllowPrerender="true"
19+
@ref="_dialog"
20+
Visible="@IsDialogVisible">
21+
<DialogEvents OnOpen="OpenDialog" OnClose="CloseDialog" Opened="OpenedDialog"></DialogEvents>
22+
<DialogAnimationSettings Effect="@DialogEffect.Zoom"></DialogAnimationSettings>
23+
<DialogTemplates>
24+
<Header>
25+
<div id="template" class="e-icon-settings">E-mail Diagram</div>
26+
</Header>
27+
<Content>
28+
<SfDiagramComponent @ref="Diagram"
29+
InteractionController="DiagramInteractions.ZoomPan"
30+
NodeCreating="NodeDefaults"
31+
ConnectorCreating="ConnectorDefaults">
32+
<SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
33+
<DataSourceSettings ID="Id"
34+
ParentID="ParentId"
35+
DataSource="@DataSource">
36+
</DataSourceSettings>
37+
<Layout Type="LayoutType.HierarchicalTree"
38+
HorizontalSpacing="@HorizontalSpacing"
39+
VerticalSpacing="@VerticalSpacing">
40+
</Layout>
41+
</SfDiagramComponent>
42+
</Content>
43+
</DialogTemplates>
44+
</SfDialog>
45+
46+
@code {
47+
private SfDialog _dialog;
48+
private SfDiagramComponent Diagram;
49+
50+
private bool IsDialogVisible = false;
51+
52+
private int HorizontalSpacing { get; set; } = 50;
53+
private int VerticalSpacing { get; set; } = 50;
54+
bool open = false;
55+
public ObservableCollection<DiagramData> DataSource { get; set; } = new()
56+
{
57+
new DiagramData { Id = "1", ParentId = "", Label = "CEO" },
58+
new DiagramData { Id = "2", ParentId = "1", Label = "Manager" },
59+
new DiagramData { Id = "3", ParentId = "2", Label = "Team Lead" },
60+
new DiagramData { Id = "4", ParentId = "3", Label = "Senior Developer" },
61+
new DiagramData { Id = "5", ParentId = "4", Label = "Developer" },
62+
new DiagramData { Id = "6", ParentId = "5", Label = "Fresher" }
63+
};
64+
65+
public class DiagramData
66+
{
67+
public string Id { get; set; }
68+
public string ParentId { get; set; }
69+
public string Label { get; set; }
70+
}
71+
72+
private async Task ShowDialog()
73+
{
74+
IsDialogVisible = true;
75+
}
76+
private async Task OpenDialog(BeforeOpenEventArgs args)
77+
{
78+
await jsRuntime.InvokeAsync<object>("UpdateWindow").ConfigureAwait(true);
79+
open = true;
80+
}
81+
protected override async Task OnAfterRenderAsync(bool firstRender)
82+
{
83+
await base.OnAfterRenderAsync(firstRender);
84+
if (open && Diagram != null)
85+
{
86+
await Task.Delay(1000);
87+
Diagram.FitToPage(new FitOptions() { Mode = FitMode.Both, Region = DiagramRegion.Content });
88+
open = false;
89+
}
90+
}
91+
92+
93+
private void CloseDialog(BeforeCloseEventArgs args)
94+
{
95+
IsDialogVisible = false;
96+
}
97+
98+
private void NodeDefaults(IDiagramObject obj)
99+
{
100+
if (obj is Node node)
101+
{
102+
node.Width = 100;
103+
node.Height = 40;
104+
node.Style = new ShapeStyle { Fill = "#6BA5D7", StrokeColor = "white" };
105+
}
106+
}
107+
108+
private void ConnectorDefaults(IDiagramObject obj)
109+
{
110+
if (obj is Connector connector)
111+
{
112+
connector.Type = ConnectorSegmentType.Orthogonal;
113+
connector.Style = new ShapeStyle { StrokeColor = "#6BA5D7", StrokeWidth = 2 };
114+
}
115+
}
116+
117+
private void OpenedDialog()
118+
{
119+
FitOptions Options = new FitOptions()
120+
{
121+
Mode = FitMode.Both,
122+
Region = DiagramRegion.Content
123+
};
124+
Diagram.FitToPage(Options);
125+
}
126+
}
127+
128+
<style>
129+
#target {
130+
min-height: 660px;
131+
}
132+
</style>

‎KB-Samples/DiagramInDialog/DiagramInDialog/Pages/_Host.cshtml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@page "/"
2+
@using Microsoft.AspNetCore.Components.Web
3+
@namespace DiagramInDialog.Pages
4+
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
5+
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8" />
10+
<base href="~/" />
11+
<link href="css/site.css" rel="stylesheet" />
12+
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.3.css" rel="stylesheet" />
13+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
14+
<script src="~/interop.js"></script>
15+
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
16+
</head>
17+
<body>
18+
<component type="typeof(App)" render-mode="ServerPrerendered" />
19+
20+
<div id="blazor-error-ui">
21+
<environment include="Staging,Production">
22+
An error has occurred. This application may no longer respond until reloaded.
23+
</environment>
24+
<environment include="Development">
25+
An unhandled exception has occurred. See browser dev tools for details.
26+
</environment>
27+
<a href="" class="reload">Reload</a>
28+
<a class="dismiss">🗙</a>
29+
</div>
30+
31+
<script src="_framework/blazor.server.js"></script>
32+
</body>
33+
</html>

‎KB-Samples/DiagramInDialog/DiagramInDialog/Program.cs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using Microsoft.AspNetCore.Components;
2+
using Microsoft.AspNetCore.Components.Web;
3+
using Syncfusion.Blazor;
4+
var builder = WebApplication.CreateBuilder(args);
5+
builder.Services.AddRazorPages();
6+
builder.Services.AddServerSideBlazor();
7+
builder.Services.AddSyncfusionBlazor();
8+
builder.Services.AddSignalR(e => {
9+
e.MaximumReceiveMessageSize = 102400000;
10+
});
11+
var app = builder.Build();
12+
13+
if (!app.Environment.IsDevelopment())
14+
{
15+
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
16+
app.UseHsts();
17+
}
18+
19+
app.UseHttpsRedirection();
20+
21+
app.UseStaticFiles();
22+
23+
app.UseRouting();
24+
25+
app.MapBlazorHub();
26+
app.MapFallbackToPage("/_Host");
27+
28+
app.Run();

‎KB-Samples/DiagramInDialog/DiagramInDialog/Properties/launchSettings.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"iisSettings": {
3+
"iisExpress": {
4+
"applicationUrl": "http://localhost:18318",
5+
"sslPort": 44368
6+
}
7+
},
8+
"profiles": {
9+
"http": {
10+
"commandName": "Project",
11+
"dotnetRunMessages": true,
12+
"launchBrowser": true,
13+
"applicationUrl": "http://localhost:5048",
14+
"environmentVariables": {
15+
"ASPNETCORE_ENVIRONMENT": "Development"
16+
}
17+
},
18+
"https": {
19+
"commandName": "Project",
20+
"dotnetRunMessages": true,
21+
"launchBrowser": true,
22+
"applicationUrl": "https://localhost:7088;http://localhost:5048",
23+
"environmentVariables": {
24+
"ASPNETCORE_ENVIRONMENT": "Development"
25+
}
26+
},
27+
"IIS Express": {
28+
"commandName": "IISExpress",
29+
"launchBrowser": true,
30+
"environmentVariables": {
31+
"ASPNETCORE_ENVIRONMENT": "Development"
32+
}
33+
}
34+
}
35+
}

0 commit comments

Comments
 (0)