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

System.Object

SfBaseComponent

SfDashboardLayout

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Namespace: Syncfusion.Blazor.Layouts

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfDashboardLayout : SfBaseComponent

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

public bool AllowDragging { get; set; }

Property Value

Type	Description
System.Boolean	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

public bool AllowFloating { get; set; }

Property Value

Type	Description
System.Boolean	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

public bool AllowResizing { get; set; }

Property Value

Type	Description
System.Boolean	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

public double CellAspectRatio { get; set; }

Property Value

Type	Description
System.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

public double[] CellSpacing { get; set; }

Property Value

Type	Description
System.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

public int Columns { get; set; }

Property Value

Type	Description
System.Int32	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

public string DraggableHandle { get; set; }

Property Value

Type	Description
System.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

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	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

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	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

public string ID { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

ijsRuntime

Declaration

protected IJSRuntime ijsRuntime { get; set; }

Property Value

Type
Microsoft.JSInterop.IJSRuntime

IsAddPanelCalled

protected variable declared.

Declaration

protected bool IsAddPanelCalled { get; set; }

Property Value

Type
System.Boolean

MediaQuery

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

Declaration

public string MediaQuery { get; set; }

Property Value

Type	Description
System.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

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

public bool ShowGridLines { get; set; }

Property Value

Type	Description
System.Boolean	true, if the grid lines should be shown. Otherwise, false.

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
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

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
System.Threading.Tasks.Task<System.String>	A System.Threading.Tasks.Task<> 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, Int32, Int32)

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
System.String	idValue	Specifies the Id value of moved panel.
System.Int32	rowValue	Specifies the Row value of moved panel.
System.Int32	colValue	Specifies the Column value of moved panel.

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

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

Returns

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

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

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

Overrides

SfBaseComponent.OnInitializedAsync()

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task

RefreshAsync()

Updates and refreshes the DashboardLayout component.

Declaration

public Task RefreshAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

RemoveAllAsync()

Clears the DashboardLayout by removing all panels.

Declaration

public Task RemoveAllAsync()

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

RemovePanelAsync(String)

Removes a panel from the DashboardLayout.

Declaration

public Task RemovePanelAsync(string idValue)

Parameters

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

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

ResetPersistDataAsync()

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

Declaration

public Task ResetPersistDataAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.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, Int32, Int32)

Resize the panel in the DashboardLayout.

Declaration

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

Parameters

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

Returns

Type	Description
System.Threading.Tasks.Task	System.Threading.Tasks.Task.

Serialize()

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

Declaration

public Task<List<PanelModel>> Serialize()

Returns

Type	Description
System.Threading.Tasks.Task<System.Collections.Generic.List<PanelModel>>	System.Threading.Tasks.Task.

SetPersistDataAsync(String)

Asynchronously loads the previously saved state of the Dashboard Layout.

Declaration

public Task SetPersistDataAsync(string properties)

Parameters

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

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.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.

UpdatedPanelsValues(PanelModel[])

Update panel position after collision calculation.

Declaration

public Task UpdatedPanelsValues(PanelModel[] updatedValues)

Parameters

Type	Name	Description
PanelModel[]	updatedValues	UpdatedValues.

Returns

Type	Description
System.Threading.Tasks.Task	="Task".

UpdatePanelContentHeight(PanelModel[], List<PanelHeaderModel>)

Update panel position and content height after collision calculation.

Declaration

public Task UpdatePanelContentHeight(PanelModel[] updatedValues, List<PanelHeaderModel> contentId)

Parameters

Type	Name	Description
PanelModel[]	updatedValues	UpdatedValues.
System.Collections.Generic.List<Syncfusion.Blazor.Layouts.PanelHeaderModel>	contentId	contentId.

Returns

Type	Description
System.Threading.Tasks.Task	="Task".