Search results

DashboardLayoutComponent

Represents the Essential JS 2 VueJS DashboardLayout Component.

<ejs-dashboardlayout></ejs-dashboardlayout>

Properties

allowDragging

boolean

If allowDragging is set to true, then the DashboardLayout allows you to drag and reorder the panels. *

Defaults to true

allowFloating

boolean

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

Defaults to true

allowResizing

boolean

If allowResizing is set to true, then the DashboardLayout allows you to resize the panels.

Defaults to false

cellAspectRatio

number

Defines the cell aspect ratio of the panel.

Defaults to 1

cellSpacing

number[]

Defines the spacing between the panels. *

Defaults to [5,5]

columns

number

Defines the number of columns to be created in the DashboardLayout.

Defaults to 1

draggableHandle

string

Defines the draggable handle selector which will act as dragging handler for the panels. *

Defaults to null

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

mediaQuery

string

Defines the media query value where the dashboardlayout becomes stacked layout when the resolution meets.

Defaults to ‘max-width:600px’

panels

PanelModel[]

Defines the panels property of the DashboardLayout component.

Defaults to null

resizableHandles

string[]

Defines the resizing handles directions used for resizing the panels.

Defaults to ‘e-south-east’

showGridLines

boolean

Enables or disables the grid lines for the Dashboard Layout panels. *

Defaults to false

Methods

addPanel

Allows to add a panel to the Dashboardlayout.

Parameter Type Description
panel PanelModel Defines the panel element.

Returns void

destroy

Destroys the DashboardLayout component

Returns void

movePanel

Moves the panel in the DashboardLayout.

Parameter Type Description
id string Defines the panel ID.
row number Defines the row of dashboard layout.
col number Defines the column of dashboard layout.

Returns void

removeAll

Removes all the panels from the DashboardLayout.

Returns void

removePanel

Removes the panel from the DashboardLayout.

Parameter Type Description
id string Defines the panel ID.

Returns void

resizePanel

Resize the panel in the DashboardLayout.

Parameter Type Description
id string Defines the panel ID.
sizeX number Defines the sizeX of dashboard layout.
sizeY number Defines the sizeY of dashboard layout.

Returns void

serialize

Returns the panels object of the DashboardLayout.

Returns PanelModel[]

updatePanel

Allows to update a panel in the DashboardLayout.

Parameter Type Description
panel PanelModel Defines the panel element.

Returns void

Events

change

EmitType<ChangeEventArgs>

Triggers whenever the panels positions are changed.

created

EmitType<Object>

Triggers when Dashboard Layout is created.

destroyed

EmitType<Object>

Triggers when Dashboard Layout is destroyed.

drag

EmitType<DraggedEventArgs>

Triggers while a panel is dragged continuously.

dragStart

EmitType<DragStartArgs>

Triggers when a panel is about to drag.

dragStop

EmitType<DragStopArgs>

Triggers when a dragged panel is dropped.

resize

EmitType<ResizeArgs>

Triggers when a panel is being resized continuously.

resizeStart

EmitType<ResizeArgs>

Triggers when a panel is about to resize.

resizeStop

EmitType<ResizeArgs>

Triggers when a panel resize ends.