# 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 (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).

← Previous Chapter Next Chapter →

Back to Overview