Search results

DashboardLayout

The DashboardLayout is a grid structured layout control, 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.

<div id="default-layout">
<script>
  let dashBoardObject : DashboardLayout = new DashboardLayout();
  dashBoardObject.appendTo('#default-layout');
</script>

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

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

*

Defaults to false

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

addPanel

Allows to add a panel to the Dashboardlayout.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Destroys the DashboardLayout component

Returns void

getPersistData

Gets the properties to be maintained upon browser refresh.

Returns string

movePanel

Moves the panel in the DashboardLayout.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeAll

Removes all the panels from the DashboardLayout.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

removePanel

Removes the panel from the DashboardLayout.

Returns void

resizePanel

Resize the panel in the DashboardLayout.

Returns void

serialize

Returns the panels object of the DashboardLayout.

Returns PanelModel[]

Inject

Dynamically injects the required modules to the component.

Returns void

Events

change

EmitType<any>

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<DragEventArgs>

Triggers while a panel is dragged continuously.

dragStart

EmitType<DragEventArgs>

Triggers when a panel is about to drag.

dragStop

EmitType<DragEventArgs>

Triggers when a dragged panel is dropped.

resize

EmitType<Object>

Triggers when a panel is being resized continuously.

resizeStart

EmitType<Object>

Triggers when a panel is about to resize.

resizeStop

EmitType<Object>

Triggers when a panel resize ends.