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.
GridList and grid.js
Positioning of the grid elements is done by the GridList library. It is initialized and used in the file grid.js. 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 stylesheet.
For undo and redo functionalities of the edit view grid.js uses the functions of the file undoService.js.
Repositioning and resizing of elements
Repositioning of elements is already supported by default by the GridList library. For resizing of elements the Resizable 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.