Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Dashboard Grid
A drag-and-drop, resizable widget layout component for composing dashboards. Built on CSS Grid with responsive breakpoints, state persistence, and keyboard support.
Default
A static dashboard with KPI cards and content widgets. Set
Editable="false" to disable drag and resize.
Loading example…
Edit Mode
Toggle
Editable to control whether widgets can be dragged and resized. Hover over widgets to reveal drag handles in the header and resize handles on corners and edges. Use OnRemove to show a remove button on hover.
Loading example…
Custom Widget Content
Widgets support
Header, ChildContent, and Footer render fragments. Use BbDashboardWidgetHeader for custom headers with icons and badges.
Loading example…
Constrained & Static
Control resize limits with
MinColumnSpan, MaxColumnSpan, MinRowSpan, and MaxRowSpan. Set Static="true" to lock a widget in place, or Draggable="false" to allow resize only.
Loading example…
Loading State
Set
Loading on the grid for a full skeleton, or on individual widgets for per-widget loading states.
Loading example…
Empty State
When no widgets exist, the grid shows
EmptyContent or a default empty message. Use OnAddWidget to show an "Add Widget" button.
Loading example…