JavaScript
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
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

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.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

addPanel

Allows to add a panel to the Dashboardlayout.

Parameter Type Description
panel PanelModel Defines the panel element.

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

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.

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

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

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

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

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.

Previous
Next