TreeGrid data formats
TreeGrid documentation
TreeGrid uses
XML structure to describe all input and output data.
Instead of XML there can be used also
JSON data format, the tag names are the same as in the XML
The root XML tag is always <
Grid>.
Immediate children of <Grid> tag are root tags and describe the parts of the grid:
Tag Description | Tag name | Possible children tags |
Communication with server | <IO> | |
Configuration of the entire grid | <Cfg> | |
Key and mouse action schema | <Actions> | |
Default rows | <Def> | <D> |
Default columns | <DefCols> | <D> |
First left fixed panel column | <Panel> | <C> |
Left fixed columns | <LeftCols> | <C> |
Variable columns | <Cols> | <C> |
Right fixed columns | <RightCols> | <C> |
Main Header row with column captions | <Header> | |
Special solid rows | <Solid> | <Space> (or <I>), <Group>, <Search>, <Toolbar>, <Tabber> |
Top fixed rows | <Head> | <I>, <Filter>, <Header> |
Variable rows in pages | <Body> | <B> (<B> can contain <I> tags that can contain nested <I> tags and so on, unlimited levels of nesting) |
Bottom fixed rows | <Foot> | <I>, <Filter>, <Header> |
Toolbar | <Toolbar> | |
Configuration menu | <MenuCfg> | |
Columns menu | <MenuColumns> | |
Print menu | <MenuPrint> | |
Export menu | <MenuExport> | |
First vertical Pager | <Pager> | |
Vertical pagers | <Pagers> | <P> |
Gantt zoom | <Zoom> | <Z> |
Gantt resources | <Resources> | <R> |
Language settings | <Lang> | <Alert>, <Text>, <Gantt>, <MenuButtons>, <MenuCopy>, <MenuCfg>, <MenuFilter>, <Format> |
Short format setting | <Par> | <P> |
Uploading or downloading changes | <Changes> | <I> |
Uploading spanned cells | <Spanned> | <I> |
Actual filters in request for data | <Filters> | <I> (instead of <Filter>, for backward compatibility) |
| | |
The parent tags (Def, LeftCols, Cols, RightCols, Solid, Head, Body, Foot, Pagers, Changes, Filters, Par) can have no attributes.
Order of root tags is optional.
Not all root tags must be present, most of their attributes are pre-defined in
required files
Defaults.xml and
Text.xml.
If tags are defined in more files, their attributes and children are merged. Existing attributes are overwritten by new value.
Defaults (<
D>), columns (<
C>) and resources (<
R>) tags are merged by
Name attribute.
Fixed and Space rows (<
I>) are merged by
id.
Other tags are single and are merged by tag name.
Pages (<
B>) and variable rows (<
I>) are
not merged, just added, even if they are the same id - this will cause an error. To change existing variable rows or add new rows from server use <Changes> tag.
XML Data are loaded in this order:
Text.xml + Bonus,
Defaults.xml + Bonus,
Base + Bonus,
Layout + Bonus,
Data + Bonus.
Formats
TreeGrid accepts data in
XML format. The XML format can use one of four sub-formats:
Internal,
Short,
Extra short,
DTD. These formats differ in speed of processing, data length and
DTD standard compatibility. The format structure differs in storing cell values and cell and row attributes.
The preferred format for standard use
Internal format.
For large grids you can use
Short or
Extra short format.
Internal XML format
Preferred format for standard use
The format is fast to process and is shorter then
DTD format. It can be generated and processed on server side by standard XML parser but without
DTD validation and cannot use standard function to locate rows by their ids.
You cannot use predefined DTD, but you can define you own DTD for your data.
This format is also used in all samples and in TreeGrid server.
This format uses TreeGrid as internal format to store data. So if you use JavaScript API to browse TreeGrid data on client, the data is in internal format.
Internal format stores cell values as row attributes named as column name. And cell attributes stores in row attributes named as column name joined with attribute name.
Internal format example
<Grid<Body><B>
<I idc1='1' c2='xx' CanDelete='0'>
<I id='r11' c2='xx-aa' c3='10' CanEdit='0' c2CanEdit='1'/>
<I id='r12' c2='xx-bb' c3='20'/>
</I>
<I id='r2' c1='2' c2='yy'>
<I id='r21' c1='10' c2='yy-aa' Calculated='1' c3Formula='c1*2'/>
</I>
</B></Body></Grid>
Short XML format
Use for large grids
It is
shorter then internal or DTD format and is
fast to process. It can be generated and processed on server side by standard parser
with DTD validation and using
getElementById (or similar) method to find row by id, same as
DTD format. But cell values and attributes are stored as text node and
needs another parsing on server side.
Short format stores cell values and row and cell attributes except
id attribute in text node in row according to predefined Par tag.
Cell attribute names in text use
Internal format naming (column name + cell attribute name).
For short format you need to define
<P Name='...' List='...'> tag, with list of attributes to use in the short format part.
The <P> tag must be defined in XML before it is used!
It is possible to mix short format and internal format, even in one node - some attribute define in node text (short format) and other in node attributes (internal format).
Text node has this format:
@par@attr1
@attr2
@...
@attrN
@ is chosen character that is not present in any attribute value (attr1-attrN). You can choose any character you want, but take care to not have it in any attribute value.
par is name of
<P Name=''> tag.
attr1,
attr2, ...,
attrN are separated values of attributes in
<P List=''>. Count of attributes (the N) must be the same as count of attributes in
List. If any attribute value is missing, just leave the space empty, but separator must be present.
Don't append any empty characters to node texts. Always append enclosing tag or first child's tag immediately after the text.
<P> string
Name
Name of parameter. The row points to this name by the first item in its text node list.
<P> string
List
Comma separated list of row attribute names listed in text node, in this order.
Attribute names always use
Internal format (column name + cell attribute name)
For example:
<P Name='PP' List='B,C'/> ... <I A='a'>@PP@b@c</I> is the same as
<I A='a' B='b' C='c'/>
Short format example
<Grid>
<Par>
<P Name='P1' List='CanDelete,c1,c2'/>
<P Name='P2' List='Calculated,CanEdit,c1,c2,c2CanEdit,c3,c3Formula'/>
</Par>
<Body><B>
<I id='r1'>@P1@@1@xx<I id='r11'>@P2@0@0@@xx-aa@1@10@</I>
<I id='r12'>@P2@@@@xx-bb@@20@</I>
</I>
<I id='r2'>@P1@1@2@yy<I id='r21'>@P2@1@@10@yy-aa@@@c1*2</I>
</I>
</B></Body></Grid>
Extra short XML format
Use for very large grids or for long page list in server paging
It is the
shortest and is the
fastest to process. It can be generated and processed on server side by standard XML parser
with DTD validation, but without access rows by their id attribute.
But cell values, row and cell attributes and immediate leaf children row's attributes and cells are stored as text node, therefore it
needs another parsing on the server side.
Extra short format stores row attributes, cell values and
attributes and attributes of all immediate leaf child rows (rows without children) in text node.
Cell attribute names in text use
Internal format naming (column name + cell attribute name).
The text node has this format:
@par@attr1
@attr2
@...
@attrN
@parchild@childcount@attr1-1
@...
@attr1-N
@attr2-1
@...
@attr2-N
@... ...
@attrChildCount-1
@...
@attrChildCount-N
@ is chosen character that is not present in any attribute value (attr1 to attrChildCount-N). You can choose any character you want, but take care to not have it in any attribute value.
par is name of
<P Name=''> tag for the parent node attributes.
attr1,
attr2, ...,
attrN are separated values of attributes in
<P List=''>. Count of attributes (the N) must be the same as count of attributes in
List. If any attribute value is missing, just leave the space empty, but separator must be present.
parchild is name of
<P Name=''> tag for all the children and their attributes.
childcount is count of children listed here.
attr1-1, ...
attr1-N are attribute values of the first child row, their names are listed it
<P Name='parchild' List='...'/>.
attr2-1, ...
attrChildCount-N are attribute values for next children.
If the main row has no attributes and first part is empty, just let it empty, like "
@@parchild@childcount@..." - two starting separators.
If there are too many children (>1000), it is possible to use another separator to divide children to sections. This speeds up data parsing in IE.
You can use "
#@par@attr1
@attr2
@...
@attrN
@parchild@childcount@#attr1-1
#...
#attr1-N
# ...
#attr100-1
#...
#attr100-N
@#attr101-1
#...
#attr101-N
# ...
#attrChildCount-1
#...
#attrChildCount-N".
The
@ is second separator, it is usually added for every 100 children.
Don't append any empty characters to node texts. Always append enclosing tag or first child's tag immediately after the text.
<P> string
Name
Name of parameter. The row points to this name by the first item in its text node list.
<P> string
List
Comma separated list of row attribute names listed in text node, in this order.
Attribute names always use
Internal format (column name + cell attribute name).
For example:
<P Name='PP' List='B,C'/> ... <I A='a'>@PP@b@c</I> is the same as <I A='a' B='b' C='c'/>
Extra short format example
<Grid>
<Par>
<P Name='N' List='id,CanDelete,c1,c2'/>
<P Name='D' List='id,Calculated,CanEdit,c1,c2,c2CanEdit,c3,c3Formula'/>
</Par>
<Body><B>
<I>@N@r1@@1@xx@D@2@r11@0@0@@xx-aa@1@10@@r12@@@@xx-bb@@20@</I>
<I>@N@r2@1@2@yy@D@1@r21@1@@10@yy-aa@@@c1*2</I>
</B></Body></Grid>
Extra short format example 2
Use for very large grids or for long page list in server paging
<Grid>
<Par>
<P Name='B' List='Name,Csum'/>
</Par>
<Body>#@@B@10000@#P1#43#P2#76#P3#45# ... #P99#65@#P100#23#P101#56# ... #P199#34@#P200#89# ... #P9999#123</Body>
</Grid>
DTD XML format
Use only when needed DTD validation
It is
largest and has
slowest processing. Use it for short data that need to be generated and processed on server side by standard XML parser
with DTD validation and using
getElementById (or similar) method to find row by id.
DTD format contains each cell data and settings in separate tag
<U>. This tag has attribute
N with column name and can have attribute
V with cell value and other attributes named as cell parameters.
DTD format example
<Grid><Body><B>
<I id='r1' CanDelete='0'><U N='c1' V='1'/><U N='c2' V='xx'/>
<I id='r11' CanEdit='0'><U N='c2' V='xx-aa' CanEdit='1'/><U N='c3' V='10'/></I>
<I id='r12'><U N='c2' V='xx-bb'/><U N='c3' V='20'/></I>
</I>
<I id='r2'><U N='c1' V='2'/><U N='c2' V='yy'/>
<I id='r21' Calculated='1'><U N='c1' V='10'/><U N='c2' V='yy-aa'/><U N='c3' Formula='c1*2'/></I>
</I>
</B></Body></Grid>
JSON format
Use if you are more familiar with JavaScript than with XML
It is
shorter than
Internal format, but
longer than
Short formats. It can be
slower than other formats for long data, especially in IE7 and below.
It does
not require to replace characters < and & by XML entities, it simplifies including HTML code into the data.
In strings must be replaced '\' by '\\' and if required " by \".
JSON format used standard JavaScript Object Notation. The strings must be quoted, the number value need not. The bool values must be set as number 0 or 1.
The root <Grid> tag is defined as not named object { }.
Before and after the root object can be any characters except < and {, for example
var MyData = { /* grid data here */ }
The definition can contains standard JavaScript comments - block /*...*/ and line //
The
simple root tags
<Cfg>,
<IO>,
<Panel>,
<Header>,
<Toolbar>,
<MenuCfg>,
<Pager>,
<Filter>, are defined as object named as the tag,
for example <Cfg MainCol='A'/> is defined as Cfg:{MainCol:'A'}
The
list root tags
<Cols>,
<LeftCols>,
<RightCols>,
<Def>,
<DefCols>,
<Head>,
<Foot>,
<Body>,
<Solid>,
<Pagers>,
<Resources>,
<Zoom>,
<Filters> and
<Changes> tags are arrays in [ ],
for example <Body> ... </Body> is defined as Body:[ ... ]
The tags <Cols>, <LeftCols>, <RightCols>, <Def> and <DefCols> are arrays since version 7.0, in previous versions were objects with named children.
The
<D> and
<C> tags are defined in array as unnamed objects with id or Name attribute and other attributes,
for example: <Cols><C Name='A' Type='Int'/></Cols> is defined as Cols:[{Name:'A',Type:'Int'} ]
Nested <I> tags (in <B>, <I> or <D>) are defined in array named
Items,
for example <I id='R1'><I id='R1-1'/></I> is defined as {id:'R1',Items:[{id:'R1-1'}]}
<B> tag without attributes can be defined as array of row objects, with attributes normally with Items tag, for example <B><I/><I/></B> is defined as [{},{}]
It is not possible to define two objects with the same name! For example you
cannot define { Cfg:{id:"grid"}, Cfg:{MainCol:"A"} }
It is
not possible to use tag names (except root tags)
Header,
Filter,
Group,
Search,
Toolbar and
Tabber, they must be defined by
Kind attribute like
<Group ... /> is defined as
{ Kind:"Group" ... }
The
<Lang> tag is defined as object with nested named objects,
for example <Lang><Format ValueSeparator=','/></Lang> is defined as Lang: { Format: { ValueSeparator:':' } }
JSON format example
var Test = {
Cfg: { id:"Json", MainCol:"A", Paging:3 },
Cols: [
{ Name:"A" },
{ Name:"B", Type:"Int", Formula:"1+1" },
{ Name:"C", Format:"d.M.yyyy" }
],
RightCols: [
{ Name:"D", Type:"Date", Format:"hh:mm" }
],
Def: [
{ Name:"R", CType:"Date" }
],
Header: { A:"AAA" },
Head: [
{ Kind:"Header", A:"H1" },
{ A:"H2" },
{ Kind:"Filter", B:3, BFilter:3 }
],
Foot: [
{ A:"F1" }
],
Body: [
[
{ A:
"R1", id:
"R1", Deleted:1, C:
'1/1/2000' },
{ A:
"R2", id:
"R2", Added:1, Items: [
{ A:
"R2-1", Changed:1, AChanged:1 },
{ A:
"R2-2", Items: [
{ A:"R2-2-1", Selected:1 }
]}
]}
],
{ id:
'B2',Count:1 }
]
}