# Dynamic grid
This chapter is about the technical background of the dynamic grid system which visualizes grids and grid elements in AsTeRICS Grid.
# General
When opening AsTeRICS Grid in the main view the latest used grid is shown:
From a technical perspective this grid is a unordered list (<ul>
) where each list element (<li>
) represents a grid element. HTML representations for these grid elements are generated in templates.js (opens new window).
# GridList and grid.js
Positioning of the grid elements is done by the GridList library (opens new window). It is initialized and used in the file grid.js (opens new window). All relevant code for functionalities like repositioning or resizing can be found there. Styling of the grid and it’s elements is done by the gridlist.css (opens new window) stylesheet.
For undo and redo functionalities of the edit view grid.js (opens new window) uses the functions of the file undoService.js (opens new window).
# Repositioning and resizing of elements
Repositioning of elements is already supported by default by the GridList library (opens new window). For resizing of elements the Resizable (opens new window) functionality of jQueryUI is used. The code for connecting jQueryUI Resizable with GridList can be found in the function getResizeOptions()
in the resize
handler about at grid.js:151 (opens new window).