DashboardLayoutComponent
23 Sep 20254 minutes to read
Represents the Essential JS 2 Angular 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
refreshDraggableHandle
Method to update the draggable handle when draggable panel elements are bound dynamically.
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.