Skip to content

Commit 06579fd

Browse files
sivakumars3442sivakumars3442
committed
991215: Updated the UG document for the TreeView and dashboard layout.
1 parent 7984ad2 commit 06579fd

File tree

1 file changed

+87
-9
lines changed

1 file changed

+87
-9
lines changed

‎blazor/dashboard-layout/panels/position-sizing-of-panels.md‎

Lines changed: 87 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,98 @@
11
---
22
layout: post
3-
title: Resizing Panels in Blazor Dashboard Layout Component | Syncfusion
4-
description: Checkout and learn here all about resizing panels in Syncfusion Blazor Dashboard Layout component and more.
3+
title: Size and Position in Blazor Dashboard Layout Component | Syncfusion
4+
description: Checkout and learn here all about size and position in Syncfusion Blazor Dashboard Layout component and more.
55
platform: Blazor
66
control: Dashboard Layout
77
documentation: ug
88
---
99

10-
# Resizing Panels in Blazor Dashboard Layout Component
10+
# Size and Position of Panels in Blazor Dashboard Layout Component
1111

12-
The Dashboard Layout component provides panel resizing functionality, which can be enabled or disabled using the [`AllowResizing`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_AllowResizing) property. This feature allows users to dynamically adjust panel dimensions through UI interactions using various resizing handlers.
12+
Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation.
13+
14+
Panels are fundamental building blocks within the Blazor Dashboard Layout component, serving as containers for data visualization and presentation.
15+
16+
| **Panel Property** | **Default Value** | **Description** |
17+
| --- | --- | --- |
18+
| <kbd>Id</kbd> | null | Specifies the ID value of the panel. |
19+
| <kbd>Row</kbd> | 0 | Specifies the row value in which the panel to be placed. |
20+
| <kbd>Column</kbd> | 0 | Specifies the column value in which the panel to be placed. |
21+
| <kbd>SizeX</kbd> | 1 | Specifies the width of the panel in cells count. |
22+
| <kbd>SizeY</kbd> | 1 | Specifies the height of the panel in cells count. |
23+
| <kbd>MinSizeX</kbd> | 1 | Specifies the minimum width of the panel in cells count. |
24+
| <kbd>MinSizeY</kbd> | 1 | Specifies the minimum height of the panel in cells count. |
25+
| <kbd>MaxSizeX</kbd> | null | Specifies the maximum width of the panel in cells count. |
26+
| <kbd>MaxSizeY</kbd> | null | Specifies the maximum height of the panel in cells count. |
27+
| <kbd>HeaderTemplate</kbd> | null | Specifies the header template of the panel. |
28+
| <kbd>ContentTemplate</kbd> | null | Specifies the content template of the panel. |
29+
| <kbd>CssClass</kbd> | null | Specifies the CSS class name that can be appended with each panel element.|
30+
31+
## Positioning of Panels
32+
33+
Panels within the layout can be precisely positioned and ordered using the [`Row`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Row) and [`Column`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_Column) properties of each `DashboardLayoutPanel`. This capability is essential for arranging data in any desired layout or order.
1334

1435
```cshtml
1536
1637
@using Syncfusion.Blazor.Layouts
1738
18-
<SfDashboardLayout CellSpacing="@(new double[]{10 ,10 })" Columns="5" CellAspectRatio="2" AllowResizing="true">
39+
<SfDashboardLayout CellSpacing="@(new double[]{20 ,20 })" Columns="4">
40+
<DashboardLayoutPanels>
41+
<DashboardLayoutPanel>
42+
<ContentTemplate><div>1</div></ContentTemplate>
43+
</DashboardLayoutPanel>
44+
<DashboardLayoutPanel Column=1>
45+
<ContentTemplate><div>2</div></ContentTemplate>
46+
</DashboardLayoutPanel>
47+
<DashboardLayoutPanel Column=2>
48+
<ContentTemplate><div>3</div></ContentTemplate>
49+
</DashboardLayoutPanel>
50+
<DashboardLayoutPanel Row=1>
51+
<ContentTemplate><div>4</div></ContentTemplate>
52+
</DashboardLayoutPanel>
53+
<DashboardLayoutPanel Row=1 Column=1>
54+
<ContentTemplate><div>5</div></ContentTemplate>
55+
</DashboardLayoutPanel>
56+
<DashboardLayoutPanel Row=1 Column=2>
57+
<ContentTemplate><div>6</div></ContentTemplate>
58+
</DashboardLayoutPanel>
59+
</DashboardLayoutPanels>
60+
</SfDashboardLayout>
61+
62+
<style>
63+
.e-panel-content {
64+
text-align: center;
65+
margin-top: 10px;
66+
}
67+
</style>
68+
69+
```
70+
71+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
72+
73+
The following screenshot illustrates panel positioning within the Dashboard Layout, utilizing the `Row` and `Column` properties:
74+
75+
![Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.png)
76+
77+
## Sizing of Panels
78+
79+
A panel's size can be easily adjusted by defining its [`SizeX`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeX) and [`SizeY`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutPanel.html#Syncfusion_Blazor_Layouts_DashboardLayoutPanel_SizeY) properties.
80+
81+
* `SizeX`: Defines the width of a panel in cells count.
82+
* `SizeY`: Defines the height of a panel in cells count.
83+
84+
These properties are invaluable when designing dashboards where the content and layout of each panel may vary significantly in size, allowing for flexible and responsive designs.
85+
86+
```cshtml
87+
88+
@using Syncfusion.Blazor.Layouts
89+
90+
<SfDashboardLayout CellSpacing="@(new double[]{10 ,10 })" Columns="5">
1991
<DashboardLayoutPanels>
2092
<DashboardLayoutPanel>
2193
<ContentTemplate><div>0</div></ContentTemplate>
2294
</DashboardLayoutPanel>
23-
<DashboardLayoutPanel SizeX=2 SizeY=2 Column=1>
95+
<DashboardLayoutPanel SizeX=2 Column=1>
2496
<ContentTemplate><div>1</div></ContentTemplate>
2597
</DashboardLayoutPanel>
2698
<DashboardLayoutPanel SizeY=2 Column=3>
@@ -29,6 +101,12 @@ The Dashboard Layout component provides panel resizing functionality, which can
29101
<DashboardLayoutPanel Row=1>
30102
<ContentTemplate><div>3</div></ContentTemplate>
31103
</DashboardLayoutPanel>
104+
<DashboardLayoutPanel Row=1 Column=1>
105+
<ContentTemplate><div>4</div></ContentTemplate>
106+
</DashboardLayoutPanel>
107+
<DashboardLayoutPanel Row=1 Column=2>
108+
<ContentTemplate><div>5</div></ContentTemplate>
109+
</DashboardLayoutPanel>
32110
</DashboardLayoutPanels>
33111
</SfDashboardLayout>
34112
@@ -41,8 +119,8 @@ The Dashboard Layout component provides panel resizing functionality, which can
41119
42120
```
43121

44-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVAsBVwTABPvxgH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
122+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
45123

46-
![Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)
124+
The following screenshot demonstrates the sizing of panels within the Dashboard Layout, using the `SizeX` and `SizeY` properties:
47125

48-
N> Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by defining the required directions with the [`ResizableHandles`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResizableHandles) property.
126+
![Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.png)

0 commit comments

Comments
 (0)