Media rules - responsive design

TreeGrid documentation

TreeGrid can apply different attributes for different screen sizes or other settings like style, like CSS @media rule.
It is possible to show / hide particular rows, columns or space cells. Change column width or height. Or change any other configuration attributes, especially for grid size.
It is not possible to change row or column order. It is not possible to add new or remove existing rows or columns.
It is possible to change default rows attributes, but it is not possible to change default columns attributes.
The items changed by Media should not be saved to / loaded from cookies. The loaded configuration for these items is overwritten by original values.

Example:

<Media>
   <M MaxWidth="1024">
      <Cols>
         <C Name="A" Visible="0"/> <C Name="B" Width="50"/>
      </Cols>
      <Rows>
         <I id="Toolbar" Visible="0"/>
      </Rows>
      <Cfg NoHScroll="1"/>
      <Lang>
         <MenuCfg Caption="Small caption"/>
      </Lang>
   </M>
   <M MaxHeight="800">
      <Rows>
         <I id="Filter" Visible="0"/> <I id="Header" Visible="0"/>
      </Rows>
   </M>
</Media>

<M> tag defines individual one media settings.
It can be placed in root <Media> tag.
It contains its specific attributes to determine if the rule will be applied or not like MaxWidth or MinHeight.
If there is no such attribute, the media rule is applied always.
If more media <M> tags fulfill actual conditions, they are applied in the order they are defined.

The <M> tag can contain only these sub tags to set their attributes to grid:
<Cols> - contains individual columns as <C> tags with at least Name attribute to identify the column to change.
<Rows> - contains individual rows as <I> tags, including fixed and space rows, with at least id attribute to identify the row to change.
<Pagers> - (since 13.0)contains individual side pagers as <P> tags.
<Def> - contains default rows as <D> tags with at least Name attribute to identify the default row to change.
<Lang> - contains all Lang sub tags like <Format> or <Text> to change particular language settings.
<Cfg> - contains attribute to change in configuration.
<MenuCfg>, <MenuColumns>, <MenuPrint>, <MenuExport> - contains attributes to change in particular menu.
<Actions> - contains attributes to change in action schema.

Since 13.0 it is possible to change columns, defs, pagers and rows with specific attribute value.
Set the row id or column/def/pager Name as "*Attribute*Value", e.g. <D Name="*Color*Red" Color="Blue" changes all default rows Color attribute from Red to Blue.
What will be tested against the MaxWidth, MinWidth, Width, MaxHeight, MinHeight, Height attributes.
If set to empty string (default), tests actual viewport (window.innerWidth, window.innerHeight).
If set to 1, tests grid main tag clientWidth / clientHeight.
Since 15.0 If set to 2, tests grid main tag clientWidth / clientHeight, but if set NoHScroll / NoVScroll tests last size of main tag before plus actual viewport change since change.
If set to id of some HTML tag on page, it tests this tag clientWidth / clientHeight.
If set, the tag size must not be affected by grid size or the grid size must not be affected by the media changes.
Default value used for all Media Tags. The <M> rule will be applied only on given media device. Case insensitive keyword. If not set, the rule is used for all devices.
Screen - screen device, both desktop and tablets.
Desktop - screen device, controlled primarily, but not only, by mouse and keyboard.
Tablet - touchscreen device, controlled primarily by fingers.
Print - printer device or print to PDF. Ignores all <M> size attributes like MaxWidth.
Export - export to Xlsx/Xls/Csv. Ignores all <M> size attributes like MaxWidth.
The <M> rule will be applied only if the browser window width is less or equal to given value in pixels.
The <M> rule will be applied only if the browser window width is greater or equal to given value in pixels.
The <M> rule will be applied only if the browser window width is equal to given value in pixels.
The <M> rule will be applied only if the browser window height is less or equal to given value in pixels.
The <M> rule will be applied only if the browser window height is greater or equal to given value in pixels.
The <M> rule will be applied only if the browser window height is equal to given value in pixels.
The <M> rule will be applied only if the grid has given language. It can be comma separated list of language codes to be applied for any of them, if the <Cfg Language> contains the code.
The <M> rule will be applied only if the grid has given style. The Style is <Cfg Style> as style prefix like "TS" or "TW".
Since 13.0 it can be comma separated list of styles to apply the media for all of them.
Media are not applied recursively, it is not possible one media to change grid style and other media to test style and change something else. The <M> rule will be applied only if the grid has given Gantt style. The Style is <Cfg GanttStyle> as style prefix like "GW" or "GS".
It can be comma separated list of styles to apply the media for all of them.
Media are not applied recursively, it is not possible one media to change grid style and other media to test style and change something else. The <M> rule will be applied only if the grid has given style size. The Size is the first item / class in <Cfg Size> like "Low" or "Small". It is not the whole Size item!
It can be comma separated list of items / classes to be applied for all of them, if the <Cfg Size> starts by any of them.
The <M> rule will be applied only if the grid is in rtl mode (for Rtl=1) or is not in rtl mode (for Rtl=0).
Name of the <M> tag to be referred by other <M> tag by Def attribute.
If the <M> tag contains only Name attribute, it is never applied directly, it is applied only via other media that refers it by Def attribute.
Comma separated list of Name attributes of other <M> tags.
This <M> tag reads all its not defined attributes from the referred <M> tags. To simply share the same definitions among more <M> tags.
In JSON definition it can be named also as Default, to not collide with <Def> definition, if both need to be defined.
What action will be done if window size is changed when grid is already rendered and some media changed some attribute.
0 - nothing will be done, media are applied only on grid load.
1 - grid will be re-rendered after every change done by media.
2 - grid layout will be updated after every change done by media. Use if media changes only grid size attributes like MaxHeight or NoHScroll.
It is ignored if some media changed <Cfg Style/>.
Width of main tag in pixels. Can be used only inside <M> tag to change main tag width by this media.
Height of main tag in pixels. Can be used only inside <M> tag to change main tag height by this media.
Comma separated list of standard or custom attributes in <M> tags checked against the same attributes in <Cfg> tag.
If <M> tag contains some of the listed attributes, it is used if <Cfg> tag contains this attribute with the same value.
Called to check if given Media part can be used in actual state. M is parsed <M> tag, one child of <Media> tag.
use is true if the M would be applied, otherwise false. Return new use.
Called before default media is created from loaded values. The default media is used to restore original values after media change.
Media is parsed <Media> tag. This event is called before OnLoaded.
Called before media are applied to grid. Return true to cancel the action.
start is true when the change is applied first time on grid load.
Called after media are applied to grid, but before the grid is re-rendered. Return true to not re-render the grid.
changed is set if some media changed some grid attribute.
start is true when the change is applied first time on grid load. In this case the return value is ignored.
Applies media changes for actual state. Returns true if something was changed.
It calls OnMediaApply and OnMediaApplied.
Array of all media rules in grid.
The individual objects contain properties like Cols, Rows, Cfg, ... with the individual settings.
And its property Attrs contains the <M> attributes like MaxWidth.