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>
Identifier for the Gridstack grid this panel is associated with.
Embedded, IncludeFrame, IncludeFrameAsync
The Logi Definition ID including any Folder Identifier
Numerical identifier for Dashboard
Panel Height in Units. The default Grid is 12 units wide.
Panel Width in Units. The default Grid is 12 units wide.
Panel x Location
x-axis location of the panel starting with 0 (on the upper-left corner)
Panel y Location
y-axis location of the panel starting with 0 (on the upper-left corner)
Numeric 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.
Devnet: Report Center Menu
WHAT IS GRIDSTACK?
LOGI REPORT CENTER ITEM
LOGI, CSS AND JQUERY
WHY USE GRIDSTACK?
MODERN UI DESIGN
GRID-BASED, NOT COLUMN
EASY TO IMPLEMENT!