Class SfDashboardLayout

The DashboardLayout is a grid structured layout component, that helps to create a dashboard with panels. Panels hold the UI components or data to be visualized with flexible options like resize, reorder, drag-n-drop, remove and add, that allows users to easily place the panels at a desired position within the grid layout.

Inheritance

object

ComponentBase

OwningComponentBase

SfOwningComponentBase

SfBaseComponent

SfDashboardLayout

Implements

Inherited Members

ComponentBase.Assets

ComponentBase.AssignedRenderMode

ComponentBase.DispatchExceptionAsync(Exception)

ComponentBase.InvokeAsync(Action)

ComponentBase.InvokeAsync(Func<Task>)

ComponentBase.OnAfterRender(bool)

ComponentBase.OnInitialized()

ComponentBase.OnParametersSet()

ComponentBase.RendererInfo

ComponentBase.SetParametersAsync(ParameterView)

ComponentBase.ShouldRender()

ComponentBase.StateHasChanged()

object.Equals(object)

object.Equals(object, object)

object.GetHashCode()

object.GetType()

object.MemberwiseClone()

object.ReferenceEquals(object, object)

object.ToString()

OwningComponentBase.IsDisposed

OwningComponentBase.ScopedServices

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(bool)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(string, object, bool, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Layouts

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDashboardLayout : SfBaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Constructors

SfDashboardLayout()

Declaration

public SfDashboardLayout()

Properties

AllowDragging

Gets or sets a value that specifies whether the DashboardLayout permits the reordering of panels through dragging.

Declaration

[Parameter]
public bool AllowDragging { get; set; }

Property Value

Type	Description
bool	`true`, if the drag option can be enabled. Otherwise, `false`. The default value is `true`.

AllowFloating

Gets or sets a value that specifies whether the DashboardLayout panels must fill the available cells while dragging or resizing.

Declaration

[Parameter]
public bool AllowFloating { get; set; }

Property Value

Type	Description
bool	`true`, if the floating option can be enabled. Otherwise, `false`. The default value is `true`.

Remarks

If AllowFloating is set to true, then the DashboardLayout will automatically move the panels upwards to fill the empty available cells while dragging or resizing the panels.

AllowResizing

Gets or sets a value that specifies whether the panels in DashboardLayout can be resized.

Declaration

[Parameter]
public bool AllowResizing { get; set; }

Property Value

Type	Description
bool	`true`, if the resizing option can be enabled. Otherwise, `false`. The default value is `false`.

CellAspectRatio

Gets or sets the cell aspect ratio of the panel.

Declaration

[Parameter]
public double CellAspectRatio { get; set; }

Property Value

Type	Description
double	A double value that representing the cell aspect ratio of panel in component. The default value is `1`.

Examples

<SfDashboardLayout Columns="5" CellAspectRatio="2">
  <DashboardLayoutPanels>
   <DashboardLayoutPanel Id="one" Column="0" Row="0">
       <HeaderTemplate>Panel 1</HeaderTemplate>
   </DashboardLayoutPanel>
   <DashboardLayoutPanel Id="two" Row="1" Column="0" SizeX=1 SizeY=2>
       <HeaderTemplate>Panel 2</HeaderTemplate>
   </DashboardLayoutPanel>
 </DashboardLayoutPanels>
</SfDashboardLayout>

CellSpacing

Gets or sets the spacing between the panels.

Declaration

[Parameter]
public double[] CellSpacing { get; set; }

Property Value

Type	Description
double[]	An array of double values that defines the spacing between panels of component. The default value is `{5, 5}`.

Examples

<SfDashboardLayout Columns="5" CellSpacing="@(new double[]{20 ,20 })">
  <DashboardLayoutPanels>
   <DashboardLayoutPanel Id="one" Column="0" Row="0">
       <HeaderTemplate>Panel 1</HeaderTemplate>
   </DashboardLayoutPanel>
   <DashboardLayoutPanel Id="two" Row="1" Column="0" SizeX=1 SizeY=2>
       <HeaderTemplate>Panel 2</HeaderTemplate>
   </DashboardLayoutPanel>
 </DashboardLayoutPanels>
</SfDashboardLayout>

Columns

Gets or sets a value that determines the number of columns to be created in the DashboardLayout.

Declaration

[Parameter]
public int Columns { get; set; }

Property Value

Type	Description
int	Accepts an integer value that representing the number of columns in component. The default value is `1`.

Examples

<SfDashboardLayout Columns="5">
  <DashboardLayoutPanels>
   <DashboardLayoutPanel Id="one" Column="0" Row="0">
       <HeaderTemplate>Panel 1</HeaderTemplate>
   </DashboardLayoutPanel>
   <DashboardLayoutPanel Id="two" Row="1" Column="0" SizeX=1 SizeY=2>
       <HeaderTemplate>Panel 2</HeaderTemplate>
   </DashboardLayoutPanel>
 </DashboardLayoutPanels>
</SfDashboardLayout>

DraggableHandle

Gets or sets the draggable handle selector which will act as dragging handler for the panels. You can enable dragging for a particular element of panel using this property.

Declaration

[Parameter]
public string DraggableHandle { get; set; }

Property Value

Type	Description
string	Accepts the string value.

Examples

<SfDashboardLayout Columns="5" DraggableHandle=".e-panel-header">
  <DashboardLayoutPanels>
   <DashboardLayoutPanel Id="one" Column="0" Row="0">
       <HeaderTemplate>Panel 1</HeaderTemplate>
   </DashboardLayoutPanel>
   <DashboardLayoutPanel Id="two" Row="1" Column="0" SizeX=1 SizeY=2>
       <HeaderTemplate>Panel 2</HeaderTemplate>
   </DashboardLayoutPanel>
 </DashboardLayoutPanels>
</SfDashboardLayout>

EnablePersistence

Gets or sets whether to persist the component's state between page reloads.

Declaration

[Parameter]
public bool EnablePersistence { get; set; }

Property Value

Type	Description
bool	`true`, if the persistence can be enabled. Otherwise, `false`.

EnableRtl

Gets or sets whether the right to left direction is enabled for the DashboardLayout component.

Declaration

[Parameter]
public bool EnableRtl { get; set; }

Property Value

Type	Description
bool	`true`, if the right to left direction can be enabled. Otherwise, `false`. The default value is `false`.

ID

Gets or sets the id attribute for the DashboardLayout element.

Declaration

[Parameter]
public string ID { get; set; }

Property Value

Type	Description
string	Accepts the string value.

IsAddPanelCalled

protected variable declared.

Declaration

protected bool IsAddPanelCalled { get; set; }

Property Value

Type
bool

MediaQuery

Gets or sets the media query value where the DashboardLayout becomes stacked layout when the resolution meets.

Declaration

[Parameter]
public string MediaQuery { get; set; }

Property Value

Type	Description
string	Accepts the string value. The default value is `max-width:600px`.

Examples

<SfDashboardLayout Columns="5" MediaQuery=" max-width:800px">
  <DashboardLayoutPanels>
   <DashboardLayoutPanel Id="one" Column="0" Row="0">
       <HeaderTemplate>Panel 1</HeaderTemplate>
   </DashboardLayoutPanel>
   <DashboardLayoutPanel Id="two" Row="1" Column="0" SizeX=1 SizeY=2>
       <HeaderTemplate>Panel 2</HeaderTemplate>
   </DashboardLayoutPanel>
 </DashboardLayoutPanels>
</SfDashboardLayout>

ResizableHandles

Gets or sets the resizing handles directions used for resizing the panels.

Declaration

[Parameter]
public ResizableHandle ResizableHandles { get; set; }

Property Value

Type	Description
ResizableHandle	Resize directions of the DashboardLayout panels. The default resize direction is 'south-east'.

Examples

<SfDashboardLayout Columns="5" AllowResizing="true" ResizableHandles="ResizableHandle.NorthEast">
  <DashboardLayoutPanels>
   <DashboardLayoutPanel Id="one" Column="0" Row="0">
       <HeaderTemplate>Panel 1</HeaderTemplate>
   </DashboardLayoutPanel>
   <DashboardLayoutPanel Id="two" Row="1" Column="0" SizeX=1 SizeY=2>
       <HeaderTemplate>Panel 2</HeaderTemplate>
   </DashboardLayoutPanel>
 </DashboardLayoutPanels>
</SfDashboardLayout>

ShowGridLines

Gets or sets the visibility of grid lines for panels within the DashboardLayout.

Declaration

[Parameter]
public bool ShowGridLines { get; set; }

Property Value

Type	Description
bool	`true`, if the grid lines should be shown. Otherwise, `false`.

ijsRuntime

Declaration

[Inject]
protected IJSRuntime? ijsRuntime { get; set; }

Property Value

Type
IJSRuntime

Methods

AddPanelAsync(PanelModel)

Allows to add a panel to the Dashboardlayout.

Declaration

public Task AddPanelAsync(PanelModel panel)

Parameters

Type	Name	Description
PanelModel	panel	The panel to be added.

Returns

Type	Description
Task	Task.

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
RenderTreeBuilder	__builder

Overrides

ComponentBase.BuildRenderTree(RenderTreeBuilder)

GetIdValues(DashboardLayoutPanel)

Update the id values for panels.

Declaration

protected void GetIdValues(DashboardLayoutPanel panel)

Parameters

Type	Name	Description
DashboardLayoutPanel	panel	Specifies the panel.

GetPersistDataAsync()

Asynchronously retrieves the properties of the Dashboard Layout that are maintained in the persisted state.

Declaration

public Task<string> GetPersistDataAsync()

Returns

Type	Description
Task<string>	A Task<TResult> representing the asynchronous operation. The task result contains the state of the Dashboard Layout as a string.

Remarks

The returned string represents the current state of the Dashboard Layout, which can be saved for later use. This state can subsequently be loaded into the Dashboard Layout using the SetPersistDataAsync(string) method.

MovePanelAsync(string, int, int)

Moves the panel to the specified row and column within the DashboardLayout.

Declaration

public Task MovePanelAsync(string idValue, int rowValue, int colValue)

Parameters

Type	Name	Description
string	idValue	Specifies the Id value of moved panel.
int	rowValue	Specifies the Row value of moved panel.
int	colValue	Specifies the Column value of moved panel.

Returns

Type	Description
Task	Task.

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
bool	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(bool)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
Task

Overrides

ComponentBase.OnParametersSetAsync()

RefreshAsync()

Updates and refreshes the DashboardLayout component.

Declaration

public Task RefreshAsync()

Returns

Type	Description
Task	Task.

RemoveAllAsync()

Clears the DashboardLayout by removing all panels.

Declaration

public Task RemoveAllAsync()

Returns

Type	Description
Task	Task.

RemovePanelAsync(string)

Removes a panel from the DashboardLayout.

Declaration

public Task RemovePanelAsync(string idValue)

Parameters

Type	Name	Description
string	idValue	The Id value of the panel to be removed.

Returns

Type	Description
Task	Task.

ResetPersistDataAsync()

Asynchronously resets the state of the Dashboard Layout to its original configuration.

Declaration

public Task ResetPersistDataAsync()

Returns

Type	Description
Task	A Task that represents the asynchronous operation.

Remarks

This method clears the current state and refreshes the Dashboard Layout based on its original declarative configuration. If the EnablePersistence setting is enabled, the method also clears any persisted state stored in window.localStorage.

ResizePanelAsync(string, int, int)

Resize the panel in the DashboardLayout.

Declaration

public Task ResizePanelAsync(string idValue, int sizeXValue, int sizeYValue)

Parameters

Type	Name	Description
string	idValue	Specifies the Id value of the panel to be resized.
int	sizeXValue	Specifies the desired width (SizeX) of resize panel.
int	sizeYValue	Specifies the desired height (SizeY) of resize panel.

Returns

Type	Description
Task	Task.

Serialize()

Retrieves the panels from the DashboardLayout as a collection of PanelModel objects.

Declaration

public Task<List<PanelModel>> Serialize()

Returns

Type	Description
Task<List<PanelModel>>	Task.

SetPersistDataAsync(string)

Asynchronously loads the previously saved state of the Dashboard Layout.

Declaration

public Task SetPersistDataAsync(string properties)

Parameters

Type	Name	Description
string	properties	A string representing the saved properties to be loaded.

Returns

Type	Description
Task	A Task that represents the asynchronous operation.

Remarks

This method loads and refreshes the Dashboard Layout using the provided saved state. The saved state can originate from various storage solutions, such as window.localStorage, a database, or other storage mechanisms.

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable