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

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

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

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

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

Returns void

destroy

Destroys the DashboardLayout component

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

movePanel

Moves the panel in the DashboardLayout.

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

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[]

updatePanel

Allows to update a panel in the DashboardLayout.

Returns void

Inject

Dynamically injects the required modules to the component.

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.