Skip to content

Commit

Permalink
Merge pull request #18 from SyncfusionExamples/851715-Gettingstarted
Browse files Browse the repository at this point in the history
Update the Code snippet from Index.razor file.
  • Loading branch information
rajendranr-5483 authored Oct 12, 2023
2 parents 71ba582 + 0247f0d commit e9c691b
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 50 deletions.
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
@page "/"

<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerAjaxSettings Url="/api/SampleData/FileOperations">
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
</FileManagerAjaxSettings>
</SfFileManager>
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
@page "/"

<SfFileManager TValue="FileManagerDirectoryContent">
<FileManagerAjaxSettings Url="/api/SampleData/FileOperations">
<FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
</FileManagerAjaxSettings>
</SfFileManager>
59 changes: 15 additions & 44 deletions Splitter/BlazorServerApp/SplitterSample/Pages/Index.razor
Original file line number Diff line number Diff line change
@@ -1,61 +1,32 @@
@page "/"

@using SplitterOrientation = Syncfusion.Blazor.Layouts.Orientation

<div>Horizontal Splitter</div>
<div style="margin:0;padding:0;height:600px;width:100%;">
<SfSplitter @ref="@Splitter" CssClass="out-splitter" Height="100%" Width="100%" SeparatorSize="4" Orientation="@SplitterOrientation">
<SplitterEvents OnResizeStop="@OnSplitterResizeStopHandler"></SplitterEvents>

<SfSplitter Height="240px" Width="100%">
<SplitterPanes>
<SplitterPane Size="25%" Min="60px">
<SplitterPane>
<ContentTemplate>
<div> Left Pane </div>
<div class="centered-content"> Left Pane </div>
</ContentTemplate>
</SplitterPane>
<SplitterPane Size="50%" Min="60px">
<SplitterPane>
<ContentTemplate>
<SfDiagramComponent @ref="Diagram" Height=@dHeight Width=@dWidth></SfDiagramComponent>
<div class="centered-content"> Middle Pane </div>
</ContentTemplate>
</SplitterPane>
<SplitterPane Size="25%" Min="60px">
<SplitterPane>
<ContentTemplate>
<div> Right Pane </div>
<div class="centered-content"> Right Pane </div>
</ContentTemplate>
</SplitterPane>
</SplitterPanes>
</SfSplitter>
</div>


@code{
string dHeight = "100%";
string dWidth = "100%";
SfDiagramComponent Diagram;
SfSplitter Splitter;
SplitterOrientation SplitterOrientation = SplitterOrientation.Vertical;

public void OnSplitterResizeStopHandler(ResizingEventArgs args)
{
int index = 0;
if(args.Index != null)
{
for (int i = 0; i < args.Index.Length; i++)
{
if(args.Index[i]== 1)
{
// Index of the diagram pane based on the order of rendering
index = i;
}
}
}
if(SplitterOrientation == SplitterOrientation.Horizontal)
{
dWidth = (args.PaneSize[index]-2).ToString() + "px";
}
else
{
dHeight = (args.PaneSize[index]-2).ToString() + "px";
}

<style>
.centered-content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
}
</style>
17 changes: 13 additions & 4 deletions Splitter/BlazorWASMApp/SplitterSample/Client/Pages/Index.razor
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,27 @@
<SplitterPanes>
<SplitterPane>
<ContentTemplate>
<div> Left Pane </div>
<div class="centered-content"> Left Pane </div>
</ContentTemplate>
</SplitterPane>
<SplitterPane>
<ContentTemplate>
<div> Middle Pane </div>
<div class="centered-content"> Middle Pane </div>
</ContentTemplate>
</SplitterPane>
<SplitterPane>
<ContentTemplate>
<div> Right Pane </div>
<div class="centered-content"> Right Pane </div>
</ContentTemplate>
</SplitterPane>
</SplitterPanes>
</SfSplitter>
</SfSplitter>

<style>
.centered-content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
</style>

0 comments on commit e9c691b

Please sign in to comment.