TreeGrid files
TreeGrid documentation
All required files are in one directory. In default distribution is this directory "
Grid\".
All files can be moved or renamed, but these changes must be registered. For every file is noted, where you have to do the changes.
By default you must preset location for main script file
GridE.js. All other files are by default searched in the same directory as
GridE.js.
All files may be modified except
GridE.js.
required JS
GridE.js
/Grid/
Main JavaScript code. You must include reference to this file in <head> section on HTML page.
<script src="../Grid/GridE.js"> </script>
To ensure the newest script is loaded, add some version parameter to it like
<script src="../Grid/GridE.js?v11_0"> </script>
It is forbidden to modify this file!
Remember, all other required files are searched by default in the same directory as this file.
JS
GridEOnDemand.js
/Grid/
JavaScript for loading main script file GridE.js only when it is required, to save time for downloading and running the long script.
Include this file instead of GridE.js if you want to download the script only on demand.
When you will want to create and show TreeGrids on your page, load GridE.js by calling the
LoadGridE (
path,
func) function.
The
path is url of GridE.js file like "../Grid/GridE.js". The
path can be relative to the main page url as usual or can be absolute.
For empty
path is used the path to the GridEOnDemand.js if exists.
Check the script path carefully, the most errors are caused because of wrong path.
The LoadGridE is asynchronous function, set
func to be called after the script is loaded.
required XML
Defaults.xml
/Grid/
Data source file with predefined values for all required TreeGrid parameters, for all grids.
This file should not be changed to avoid problems with upgrading to new TreeGrid version.
To predefine default values for all your grids use
Base data source.
Path and name and/or place you can change in <treegrid>/<bdo> attribute prefix
Defaults_.
This file can be loaded as static file or can be generated by web page or service or can be included in HTML page.
There is also
JSON version of the Defaults.xml located in /Examples/Html/BasicAjax/
Defaults.js.
See the Defaults.xml content
required XML
Text.xml
/Grid/
Data source file with all TreeGrid texts and messages and language dependent constants for formatting numbers and dates.
Path and name and/or place you can change in <treegrid>/<bdo> attribute prefix
Text_.
This file can be loaded as static file or can be generated by web page or service or can be included in HTML page.
This file is for English language.
You can translate this file to any other languages and also return appropriate language file according to client browser settings.
There is also
JSON version of the Text.xml located in /Examples/Html/BasicAjax/
Text.js.
See the Text.xml content
new 13.0 required CSS
style_nameGrid.css
/Grid/Styles/
Responsive cascade style sheets for TreeGrid.
Compatible with IE9+ and all modern browsers. A few minor features are disabled in IE9 and IE10.
The file name prefix
style_name is the style name, e.g. White.
The CSS file includes all required images. The only external files not included by default in the CSS file is the TTF font file.
The CSS file can be easily modified by changing its css sources in GridSrc/Grid/style_name/
Grid.css and compiled by ../GridSrc/
ShrinkCSS.exe.
How to change CSS styles is described in comments in the source Grid.css and Gantt.css.
There are actually five predefined responsive CSS styles for TreeGrid.
Every style has its own class prefix, so more
Grid.css styles can be included to one page at once.
TreeGrid can have set different responsive CSS style for grid and Gantt. The Grid.css and Gantt.css use different class prefixes.
The actual grid style is set by
<Cfg Style='...'/> attribute.
If the Grid.css is moved, its path can be set by
<Cfg CSS='...'/>, relative to the actual page URL.
Responsive CSS style can set their size by
<Cfg Size='...'/>.
There are nine predefined sizes: Tiny, Mini, Small, Low, Normal, Wide, High, Big, Giant.
Only one style can be used by one grid at a time, but you can switch the styles at runtime. Also every grid on page can have its own style chosen.
All files of unused CSS styles can be deleted if required.
new 13.0 conditional CSS
style_nameGantt.css
/Grid/Styles/
Responsive cascade style sheets for TreeGrid Gantt chart column content.
It is required only if used Gantt chart.
Compatible with IE9+ and all modern browsers. A few minor features are disabled in IE9 and IE10.
The file name prefix
style_name is the style name, e.g. White.
The CSS file includes all required images. The only external files not included by default in the CSS file is the TTF font file, but actual Gantt CSS does not define its fonts.
The CSS file can be easily modified by changing its css sources in GridSrc/Grid/style_name/
Gantt.css and compiled by ../GridSrc/
ShrinkCSS.exe.
How to change CSS styles is described in comments in the source Grid.css and Gantt.css.
There are actually five predefined responsive CSS styles for TreeGrid Gantt chart.
Every style has its own class prefix, so more
Gantt.css styles can be included to one page at once.
TreeGrid can have set different responsive CSS style for grid and Gantt. The Grid.css and Gantt.css use different class prefixes.
The actual Gantt style is set by
<Cfg GanttStyle='...'/> attribute.
If the Gantt.css is moved, its path can be set by
<Cfg GanttCSS='...'/>, relative to the actual page URL.
Responsive CSS style can set their size by
<Cfg Size='...'/>.
There are nine predefined sizes: Tiny, Mini, Small, Low, Normal, Wide, High, Big, Giant.
Only one style can be used by one grid at a time, but you can switch the styles at runtime. Also every grid on page can have its own style chosen.
All files of unused CSS styles can be deleted if required.
new 13.0 CSS
Grid.css
/GridSrc/Grid/style_name/
Source file for responsive cascade style sheets for TreeGrid.
They are not required to run TreeGrid.
They can be modified and the changes compiled to original CSS files by ../GridSrc/
ShrinkCSS.exe compiler.
new 13.0 CSS
Gantt.css
/GridSrc/Gantt/style_name/
Source file for responsive cascade style sheets for TreeGrid Gantt chart.
They are not required to run TreeGrid.
They can be modified and the changes compiled to original CSS files by ../GridSrc/
ShrinkCSS.exe compiler.
new 13.0 Win EXE
ShrinkCSS.exe
/GridSrc/
CSS compiler. Windows executable that compiles all source CSS files in /GridSrc/ directory and copies the results to /Grid/Styles/ directory. Overwrites the content in /Grid/Styles/.
All the settings for the program are in
ShrinkCSS.ini placed in the same directory as the program.
CSS
Grid.css
/Grid/Compatible/style_name/
Old compatible cascade style sheets for TreeGrid.
Compatible with all browsers including old IE6+ browsers.
Every available TreeGrid style has its own subdirectory in /Grid directory and here are the
Grid.css and
Gantt.css files.
The
Gantt.css is required only if used Gantt chart. The
Grid.css is required for both grid and Gantt.
These files reference all the other image files in the style subdirectory. These image files are
not accessed by TreeGrid script itself.
There are eleven available styles now:
Standard,
Light,
Office,
Gradient,
Borders,
Query,
ExtJS,
Material,
Robust,
Plain,
Colors.
Every style has its own class prefix, so more
Grid.css /
Gantt.css styles can be included to one page at once.
The actual style is set by
<Cfg Style='...'/> attribute.
If the Grid.css is moved, its path can be set by
<Cfg CSS='...'/>, relative to the actual page URL.
Only one style can be used by one grid at a time, but you can switch the styles at runtime. Also every grid on page can have its own style chosen.
All unused styles, their subdirectories, can be deleted if required.
How to change CSS styles is described in comments in the Grid.css and Gantt.css.
CSS
Grid.css
/Grid/Compatible/style_name/
Old compatible cascade style sheets for TreeGrid Gantt chart. See
Grid.css.
cursor
Drag.cur
/Grid/
Mouse cursor displayed when dragging row(s) or column(s).
The file must be placed in the same directory as GridE.js.
Can be redefined by <Cfg DragCursor/>.
cursor
NoDrag.cur
/Grid/
Mouse cursor displayed when dragging row(s) or column(s) and drop is not possible.
The file must be placed in the same directory as GridE.js.
Can be redefined by <Cfg NoDragCursor/>.
sound
Ding.wav
/Grid/
Beep played on error in EditMask when grid has set
<Cfg Silent='0'/>.
The file must be placed in the same directory as GridE.js.
HTML
Help.html
/Grid/
User help for TreeGrid. It is displayed after user clicks on
Help button at control panel.
Path and name you can change in input
XML data, in attribute
<Cfg HelpFile='...'/>.
Note, this file uses images from compatible Gradient style!
new 12.1 conditional JS
jszip.min.js
/Grid/External/
JSZip is third party library for LZ compression.
It is independent on TreeGrid. It is distributed under MIT or GPLv3 license.
It can be downloaded or its licensing read at
https://stuk.github.io/jszip/.
It is loaded by TreeGrid only for client export to XLSX and import from XLSX.
To not use it at all, set <Cfg JSZip='0'/>, in this case the export will produce longer uncompressed XLSX files and the XLSX import will be disabled.