GRIDSTACK & TABLESELECT

Requirement: Responsive Grid-Based Dashboard

GRIDSTACK.js is a jQuery plugin that provides a responsive, draggable, multi-column grid dashboard layout. TableSelect.js is a jQuery plugin which transforms a Logi DataTable into a Multi-Select Input Element. We tied the two together to create a Responsive Dashboard which provides intuitive global dashboard panel filtering. We utilized Logi's Report Center Item element to identify a panel's inclusion within the Dashboard.

Add panels to a Gridstack by specifying details in the ReportCenter Item's ReportCenter Folder property.



Report Center Item Folder should have the following syntax:

<GridstackGrid>,<ContentMode for SubReport>,<ReportID>,<DashboardID>,<Panel Height>,<Panel Width>,<Panel x Location>,<Panel y Location>,<PanelID>


GridstackGridIdentifier for the Gridstack grid this panel is associated with.
ContentModeEmbedded, IncludeFrame, IncludeFrameAsync
ReportIDThe Logi Definition ID including any Folder Identifier
DashboardIDNumerical identifier for Dashboard
Panel HeightPanel Height in Units. The default Grid is 12 units wide.
Panel WidthPanel Width in Units. The default Grid is 12 units wide.
Panel x Locationx-axis location of the panel starting with 0 (on the upper-left corner)
Panel y Locationy-axis location of the panel starting with 0 (on the upper-left corner)
PanelIDNumeric Identifier for the panel


Gridstack has the ability to produce a json string in order to save the panel location. Gridstack grids may also be nested which is useful when you have smaller KPI metrics to display. Gridstack also supports multiple grids, allowing an end use the ability to drag and drop panels from one grid to another. Please see the Gridstack demo link below.

Useful Links:

  • Devnet: Report Center Menu
  • Devnet: DataLayer.DefinitionList
  • Gridstack.js
  • Gridstack Demo
  •   GRIDSTACK
    WHY USE GRIDSTACK?









    MODERN UI DESIGN




    IT'S RESPONSIVE!




    GRID-BASED, NOT COLUMN




    EASY TO IMPLEMENT!