Grid size & scroll
FastGrid documentation
Grid size
Default grid size is controlled by the
<fast-grid> tag (or the tag specified in the
FastGrid() call) CSS style. The base options are:
1. Default (limited vertical scroll, 100% or fixed width)
The <fast-grid> tag is displayed with all default settings:
display: block; height: auto; width: auto; position: static;. The
height and
width can be set also in
percent.
The RowParts
Rel is ignored. The RowParts show vertical scrollbar only if they have set
MaxHeight. Otherwise the grid height will be sum of all rows and toolbars heights.
The grid can have relative ColParts and displays horizontal scrollbars normally.The grid will be resized to 100% or given percent width. If
width is set fixed, e.g. in pixels, it fixes the grid width to this value.
2. No scroll (limited horizontal and vertical scroll)
The <fast-grid> tag is displayed with minimal height and width:
display: inline-block; height: auto; width: auto; position: static;.
The RowParts
Rel is ignored. The RowParts show vertical scrollbar only if they have set
MaxHeight. Otherwise the grid height will be sum of all rows and toolbars heights.
The ColParts
Rel is ignored. The ColParts show horizontal scrollbar only if they have set
MaxWidth. Otherwise the grid width will be sum of all columns widths.
It it is the same for all CSS settings removing the tag from html flow like
position: absolute,
position: fixed,
float: left,
float: right, etc.
If permitted hiding grid parts by Layout menu, it is recommended to set also
min-width, to preserve displaying the Layout toolbar.
3. Fixed height (
standard way, normal vertical and horizontal scroll, 100% or fixed width)
The <fast-grid> tag is displayed with fixed height in fixed units like pixels:
display: block; height: 999px; width: auto; position: static;.
The grid can have relative RowParts and displays vertical scrollbars normally. The grid height is fixed to given height.
The grid can have relative ColParts and displays horizontal scrollbars normally.The grid will be resized to 100% or given percent width. If
width is set fixed, e.g. in pixels, it fixes the grid width to this value.
The grid
height can be set also relative, e.g. in
percent, if immediate parent tag has set fixed height, e.g. <div style='height:800px;'><fast-grid style='height:80%;' ...
4. Fixed height and width (
standard way, normal vertical and horizontal scroll, fixed width)
The <fast-grid> tag is displayed with fixed height in fixed units like pixels:
display: any; height: 999px; width: 999px; position: any;.
The grid can have relative RowParts and displays vertical scrollbars normally.The grid height is fixed to given height.
The grid can have relative ColParts and displays horizontal scrollbars normally.The grid width is fixed to given width.
The grid
height can be set also relative, e.g. in
percent, if immediate parent tag has set fixed height, e.g. <div style='height:800px;'><fast-grid style='height:80%;' ...
The behavior can be different if the page is in quirks mode (if missing <!DOCTYPE html> at page beginning)
If set to
1, tries to increase
Tag height to use maximal available window height without showing the window scrollbars.
It can be used only in html layout where the Tag height affects the html body height!
If the Tag is placed in some parent that has set its height or is positioned absolute, the results will be wrong!
If set to
2, updates
Tag height to place its bottom edge to bottom of the page when vertical scroll is 0.
If set to
3, updates
Tag height to place its bottom edge to bottom of the page in actual vertical scroll, but never higher than window height.
If set to
4, updates
Tag height like
3 whenever window vertically scrolls.
Reserved amount of pixels under grid tag when maximizing tag height by
MaximizeHeight. It can be also negative - it will display page vertical scollbar.
Minimal height of
Tag in pixels when resized by
MaximizeHeight or
ResizingTag&
1.
Minimal width of
Tag in pixels when resized by
ResizingTag&
2.
Maximal height of the grid inside the its
Tag. Use if the Tag has not set fixed CSS height (in pixels).
If the grid is narrower than this value, the Tag height shrinks. If the grid is higher than this value, the Tag height is set to this value.
Maximal width of the grid inside the its
Tag. Use if the Tag has not set fixed CSS width (in pixels) and is displayed absolute or with display:inline-block.
If the grid is narrower than this value, the Tag width shrinks. If the grid is wider than this value, the Tag width is set to this value.
If the grid main tag can be resized by mouse dragging the bottom right corner.
0 - no,
1 - vertically,
2 - horizontally,
3 - both directions.
If set, presets width of main tag on start. It can be number as value in pixels or CSS width. It can be also saved to cookies to preserve actually resized tag width.
If set, presets height of main tag on start. It can be number as value in pixels or CSS height. It can be also saved to cookies to preserve actually resized tag height.
If set, zooms the whole grid display by this floating point value, uses CSS
zoom.
Grid method void
SetZoom
(number zoom = null)
Sets
Zoom attribute to
zoom value and changes the grid zoom immediatelly.
Actions
DragGrid
(int target = 0) OnDrag Menu Caption
Moves the grid by mouse by changing position of the grid
Tag if it is absolute / fixed tag or the Tag parent if the grid is shown as Dialog.
Grid scrollbars
0 - standard browser dependent scrollbars (no scrollbars on tablet),
1 - custom scrollbars with buttons,
2 - custom scrollbars without buttons,
3 - no scrollbars.
Default is
0 for desktop and
2 for tablet.
Thickness of the custom scrollbars in pixels.
Minimal height / width of the thumb of custom scrollbar in pixels.
Default is
17 for desktop and
40 for tablet.
Maximal distance of mouse cursor from the dragged thumb (in opposite direction). If mouse is further, the thumb is returned to its initial position.
Duration of the first click to scrollbar button or body, in ms.
Duration of the delay between first click to scrollbar button or body and continuing scroll, in ms.
How many pixels is scrolled the grid when clicked to custom scrollbar button. The grid is scrolled by this amount every 10 ms.
The final scroll on the first click to button is
CustomScrollButtonScroll *
CustomScrollClick /
10 pixels.
How much is scrolled the grid when clicked to custom scrollbar body (outside button and thumb). The grid is scrolled by this amount every 10 ms.
The final scroll on the first click to body is about
CustomScrollBodyScroll *
CustomScrollClick /
10 pixels.
If the value is less than
1, it is multiplied by actual width / height of the view.
Actions
Scroll
(int target = 0, int direction = 0, int step = 50)
OnDown, OnUp, OnLeft, OnRight, OnPageDown, OnPageUp, OnHome, OnEnd
Scrolls actual or focused row / column part to given
direction (
0 - down,
1 - up,
2 - right,
3 - left), by
step pixels.
Actions
DragScroll
(int target = 0)
OnRightDragAny
Scrolls actual part by mouse dragging.
Grid method void
SetCustomScroll
(int scroll = 0, int width = null)
Sets
CustomScroll and
CustomScrollWidth attributes and marks grid for repaint.
Paging and view
For debugging purposes only!.
0 - all rows and columns are placed to one page in data and everything is rendered on start,
1 - measures texts on start,
2 - measures texts on render.
Count of rows in one created page in data. It affects performance of rows manipulation, it should be set to root of expected maximal row count in grid.
Setting it below 100 for small row count has no effect.
Count of columns in one created page in data. It affects performance of columns manipulation, it should be set to root of expected maximal column count in grid.
Setting it below 100 for small column count has no effect.
Padding on both sides RowPart view in pixels. If there is vertical scroll more than this value, view is repainted.
The bigger value makes the view higher and causes its slower paint. The smaller value makes the view smaller and causes more often repaint on scroll.
Maximal change of view height to change internal view height and repaint the view, in pixels.
Rendered height of view is = height + WindowVert*2 + WindowVertDiff. The higher view, the slower render.
Padding on both sides ColPart view in pixels. If there is horizontal scroll more than this value, view is repainted.
The bigger value makes the view wider and causes its slower paint. The smaller value makes the view narrower and causes more often repaint on scroll.
Maximal change of view width to change internal view width and repaint the view, in pixels.
Rendered width of view is = width + WindowHorz*2 + WindowHorzDiff. The wider view, the slower render.
Maximal height of the window in pixels. To avoid freezing grid when rendering to tag without CSS height set.
Media rules - responsive design
Every
Media item object can contain full FastGrid data with tags like
Cfg or
Body and also special
Rules tag.
There are predefined media that can be extended:
Base - loaded for every media, empty by default.
Tablet - predefined changes for touch screens. Loaded on
Tablet =
1.
Mobile - predefined changes for narrow displays, mostly mobiles. Loaded on
MaxWidth =
500.
Grid Media[id]
Media
List of media rules by their ids. They are applied in the order they are defined.
Every
Media item object can contain full FastGrid data with tags like
Cfg or
Body and also special
Rules tag.
Media Rules
Rules
Object with rules when and how the Media will be applied.
Rules bits
Apply
[...]
When the Media will be applied.
1. bit &
1 - once on grid load, before loading saved configuration.
2. bit &
2 - once on grid load, after loading saved configuration and set
Language and
Style.
3. bit &
4 - after every screen size change.
4. bit &
8 - after every change of
Language and
Style.
5. bit &
16 - after every change of any
Cfg attribute.
If not set, default value is chosen from the other Rules, if containt only
Tablet, it is set to
1, otherwise it is set to
2 plus
4 (if contains size rules) plus
8 (if contains
Language /
Style) plus
16 (if contains
Cfg).
The applied Media overrides actual configuration settings (except if set to 1)!
If Media changes any row, column, cell, toolbar or toolbar cell, there should be defined also Base Media applied always that resets original values for these items, to be used when no other Media sets them.
Rules bool
Tablet
If set to
1, the Media will be applied only on tablets and phones with touch screen without mouse.
If set to
0, the Media will be applied only on desktops (even with touch screen) with mouse.
Rules int
MaxWidth
The Media will be applied only when the screen width is less or equal to the MaxWidth, in pixels.
Rules int
MinWidth
The Media will be applied only when the screen width is bigger or equal to the MinWidth, in pixels.
Rules int
MaxHeight
The Media will be applied only when the screen height is less or equal to the MaxHeight, in pixels.
Rules int
MinHeight
The Media will be applied only when the screen height is bigger or equal to the MinHeight, in pixels.
Rules string
Language
Comma separated language ids the Media will be applied for. If the actual language is not included, the Media is ignored.
Rules string
Style
Comma separated style ids the Media will be applied for. If the actual style is not included, the Media is ignored.
Rules object
Cfg
The Media will be applied only if all listed attributes in the
Cfg have the same values as the grid
Cfg attributes.
The attribute value can be JavaScript RegExp object to test it against the grid Cfg value, by search().
For example:
Rules:{ Cfg:{ PivotCols:/Col1|Col2/, PivotRows:"Col3" } }
API event bool
OnApplyMedia
(Grid grid, Media[] media, bits apply)
Called before
media applied to grid.
media is array of
Media items that will be applied.
apply is the phase when the media are applied, the same as
apply in
ApplyMedia.
Return true to not apply the media.
This event handler can modify the
Media array.
API event void
OnAppliedMedia
(Grid grid, Media[] media, bits apply)
Called after
media applied to grid, before
Paint.
media is array of
Media items that will be applied.
apply is the phase when the media are applied, the same as
apply in
ApplyMedia.
Grid method void
ApplyMedia
(bits apply = 30)
Manually applies actual media to grid. Call it after some change in grid that is not automatically handled to apply the media.
Applies only media their
Apply &
apply is not zero.