# Dynamic grid

This chapter is about the technical background of the dynamic grid system which visualizes grids and grid elements in AsTeRICS Grid.

  1. General
  2. GridList and grid.js
  3. Repositioning and resizing of elements

Back to Overview

# General

When opening AsTeRICS Grid in the main view the latest used grid is shown:

default grid

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.

← Previous Chapter Next Chapter →

Back to Overview

Last Updated
1/18/2022, 8:49:06 AM