developer guide
Full-Screen and Maximise for a Data Grid
A grid inside a dashboard panel can take the whole window and return to its tile, keeping its scroll position, selection and open groups, so a reader can look closely at one table without losing their place.
Developer guide › Presenting and saved views › Full-Screen and Maximise for a Data Grid
Maximise
A grid usually lives in whatever box the page layout gave it, and that box is usually too small for the job. The left rail's last button fills the browser window with the grid, and clicking it again puts the grid back exactly where it was. Esc also restores.
Your own control, or a keyboard shortcut
// The rail button is on by default. This is the same thing.
grid.maximise.toggle();
grid.maximise.active(); // true while it fills the window
document.addEventListener('keydown', (e) => {
if (e.key === 'F11' && !e.ctrlKey) { e.preventDefault(); grid.maximise.toggle(); }
});
// Or take the button away, if the application has its own full-screen mode.
createGrid(el, { maximise: false });One button in two states rather than two buttons: the icon and its label turn round when the grid is maximised, so the control always describes what it is about to do.
The element is moved, not just restyled. A position: fixed
element is positioned against the nearest ancestor carrying a transform,
filter, contain or will-change, which is to say any
card, any animated panel, any sticky app shell, and against the viewport only when there is
no such ancestor. A class alone would therefore fill the window on one page and land in a
300px box on the next, and would still be clipped by an overflow: hidden or
buried by a stacking context. Reparenting to <body> removes every ancestor
that could do any of that.
Coming back is a hidden placeholder left in the element's place, not a remembered parent and index, an index goes stale the moment your application inserts a sibling while the grid is away, and then silently reinserts in the wrong slot. The placeholder also holds the vacated space open at the size the grid had, so the page behind neither reflows nor loses its scroll position while you are looking at the grid.
The geometry is written as inline styles and every displaced property is handed back
exactly as it was found, because the element being restyled is yours: most often one
with an inline height on it, which is the ordinary way a grid gets sized and
which nothing but an inline style can beat. While maximised, the element carries
.lat-maximised and <body> carries
.lat-maximised-host, as hooks for your own CSS.