Home > Class Reference > ENSLIB namespace > %ZEN.Component.snapGrid
Private  Storage   

%ZEN.Component.snapGrid


class %ZEN.Component.snapGrid extends 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.

Inventory


Parameters Properties Methods Queries Indices ForeignKeys Triggers
1 7 3


Summary


Properties
%condition %import %includeFiles %page
%resource align aux children
cols colsLandscape colsPortrait composite
containerStyle disabled dragEnabled dropEnabled
enclosingClass enclosingStyle error groupName
height hidden hint hintClass
hintStyle id index label
labelClass labelDisabledClass labelStyle name
onafterdrag onbeforedrag ondrag ondrop
onhide onrefresh onshow onupdate
parent rows rowsLandscape rowsPortrait
showLabel slice title tuple
valign visible width window

Methods
%AddChild %AddChildAfter %AddChildBefore %AddToSaveSet
%Attr %BindExport %ClassIsLatestVersion %ClassName
%ConstructClone %DispatchClassMethod %DispatchGetModified %DispatchGetProperty
%DispatchMethod %DispatchSetModified %DispatchSetMultidimProperty %DispatchSetProperty
%DrawComponentHTML %DrawHTML %DrawJSStrings %EnclosingDivId
%Eval %EvalC %Extends %ForceClientRender
%GetChildIndex %GetEventHandlers %GetParameter %GetXMLName
%IsA %IsModified %MakeId %New
%NormalizeObject %ObjectModified %OnAddToPageAfter %OnAddToPageBefore
%OnDrawEnclosingDiv %OnDrawObjectProperties %OnMutateChildren %OnObjectSynch
%OnZENDeserialize %OriginalNamespace %PackageName %QuoteValue
%QuoteValueL10N %RemoveChild %RemoveChildren %RemoveFromSaveSet
%Self %SerializeObject %SetModified %ValidateObject
XMLDTD XMLExport XMLExportToStream XMLExportToString
XMLNew XMLSchema XMLSchemaNamespace XMLSchemaType
addChild addChildAfter addChildBefore bringToFront
broadcast childrenMutated dragFinishHandler dragHandler
dragNotifyHandler dragStartHandler dropHandler dropStartHandler
exposeComponent findElement fireOnUpdateEvent forceRefresh
getChildIndex getEnclosingDiv getGroupManager getHidden
getHintElement getLabelElement getProperty getSettings
getType getWallpaperDiv invokeSuper isOfType
makeId onCreate onDelete onDisplayHandler
onEndModalHandler onPopupAction onRefreshContents onSerialize
onStartModalHandler ondisabledHandler onloadHandler onunloadHandler
onupdateHandler refreshContents removeChild render
renderContents renderSVG setHidden setOverlayMode
setProperty setPropertyAll startProgressBar stopProgressBar


Parameters


• parameter INCLUDEFILES = "zenSnapGrid.js";
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 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 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 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 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 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 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

Methods


• method %DrawHTML()
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.
• method onloadHandler() [ Language = javascript ]
This client event, if present, is fired when the page is loaded.
• method setProperty(property, value, value2) [ Language = javascript ]
Set the value of a named property.