Skip to main content

%ZEN.Component.snapGrid

class %ZEN.Component.snapGrid extends %ZEN.Component.abstractDragGroupMgr

%ZEN.Component.snapGrid is a dynamic layout control designed to organize dragGroups in a tiled layout with an automatic snap to grid feature. The underlying grid is defined by the number of rows and columns requested. The resulting gird is a normalized space where, for example a four column layout would result in each column being 25% of the total width wide.

The grid itself does not scroll, however the dragGroups themselves may.

The layout may be further refined into portrait and landscape modes such that the number of columns and rows may change if the geometry of the widget itself becomes taller than it is wide (or vise versa). This is particularly useful for adapting layouts on tablet devices such as the iPad.

Property Inventory

Method Inventory

Parameters

parameter INCLUDEFILES = zenSnapGrid.js;
Inherited description: CSV list of additional include files (either .js or .css) that should be included when this component is used on a page.
By default, the file extension (.js or .css) is used to determine whether an item in the list is a script include or a style include. You can override this behavior by adding the terms "script:" or "style:" to the beginning of the file name or names. This prefix is not used as part of the include filename.

Properties

property cols as %ZEN.Datatype.integer [ InitialExpression = 3 ];
If defined, this is used to define the number of columns used for both portrait and landscape layouts
Property methods: colsDisplayToLogical(), colsGet(), colsIsValid(), colsLogicalToDisplay(), colsLogicalToOdbc(), colsNormalize(), colsSet()
property colsLandscape as %ZEN.Datatype.integer;
If defined, this is used to define the number of columns when the rendered width of the widget is greater than or equal to its height
Property methods: colsLandscapeDisplayToLogical(), colsLandscapeGet(), colsLandscapeIsValid(), colsLandscapeLogicalToDisplay(), colsLandscapeLogicalToOdbc(), colsLandscapeNormalize(), colsLandscapeSet()
property colsPortrait as %ZEN.Datatype.integer;
If defined, this is used to define the number of columns when the rendered width of the widget is less than its height
Property methods: colsPortraitDisplayToLogical(), colsPortraitGet(), colsPortraitIsValid(), colsPortraitLogicalToDisplay(), colsPortraitLogicalToOdbc(), colsPortraitNormalize(), colsPortraitSet()
property groupName as %ZEN.Datatype.string [ InitialExpression = "snapGrid" ];
The logical name of the manager with respect to the external JavaScript code that actually manages the space
Property methods: groupNameDisplayToLogical(), groupNameGet(), groupNameIsValid(), groupNameLogicalToDisplay(), groupNameLogicalToOdbc(), groupNameNormalize(), groupNameSet()
property rows as %ZEN.Datatype.integer [ InitialExpression = 2 ];
If defined, this is used to define the number of rows used for both portrait and landscape layouts
Property methods: rowsDisplayToLogical(), rowsGet(), rowsIsValid(), rowsLogicalToDisplay(), rowsLogicalToOdbc(), rowsNormalize(), rowsSet()
property rowsLandscape as %ZEN.Datatype.integer;
If defined, this is used to define the number of rows when the rendered width of the widget is greater than or equal to its height
Property methods: rowsLandscapeDisplayToLogical(), rowsLandscapeGet(), rowsLandscapeIsValid(), rowsLandscapeLogicalToDisplay(), rowsLandscapeLogicalToOdbc(), rowsLandscapeNormalize(), rowsLandscapeSet()
property rowsPortrait as %ZEN.Datatype.integer;
If defined, this is used to define the number of rows when the rendered width of the widget is less than its height
Property methods: rowsPortraitDisplayToLogical(), rowsPortraitGet(), rowsPortraitIsValid(), rowsPortraitLogicalToDisplay(), rowsPortraitLogicalToOdbc(), rowsPortraitNormalize(), rowsPortraitSet()

Methods

method %DrawHTML()
Inherited description: Static HTML display method: draw the BODY of this component as HTML.
Subclasses implement this in order to render the static HTML contents of a component.
clientmethod onloadHandler() [ Language = javascript ]
This client event, if present, is fired when the page is loaded.
clientmethod setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.

Inherited Members

Inherited Properties

Inherited Methods

FeedbackOpens in a new tab