<html> <head> <link id=GridCSS href="../Grid/Grid.css" title="GridStyle" type="text/css" rel="stylesheet"> <script src="../Grid/GridE.js"> </script> </head> <body> <div style="width:100%;height:100%;"> <treegrid Data_Url="BasicX ... .xml"> </treegrid> </div> </body> </html>If you modify in input data some attributes saved to cookies, increase <Cfg> attribute Version to suppress old configuration.
Show example | Show data source | |
|
<Grid> <Cfg id='Simple1'/> <Cols> <C Name='Col1'/> </Cols> <Body> <B/> </Body> </Grid> |
|
Show example | Show data source | |
|
The variable rows are defined inside (body) pages as tag
<I>.
If there is used none or client paging, all rows are defined inside one page (one tag <B>). Values for columns are set to attributes according to column names. There is shown internal format, but there are three other possible formats to use, see documentation. If you want to update changes to server, every row must have set id attribute to unique string to identify it or you can use more advanced rows' identification on server, see tutorial. |
<Grid> <Cfg id='Simple2'/> <Cols> <C Name='Col1'/> </Cols> <Body> <B> <I Col1='Val1'/> <I Col1='Val2'/> <I Col1='Val3'/> <I Col1='Val4'/> </B> </Body> </Grid> |
Show example | Show data source | |
|
Fixed rows can be defined on top inside <Head> tag and/or bottom inside <Foot> tag.
Fixed rows are always visible and cannot be scrolled. The grid must be high enough to display all fixed rows. Fixed rows are not paged and cannot contain tree (cannot be nested). The data format is the same as in variable rows. |
<Grid> <Cfg id='Simple3'/> <Cols> <C Name='Col1'/> </Cols> <Head> <I Col1='Header row's val1'/> </Head> <Body> <B> <I Col1='Val1'/> <I Col1='Val2'/> <I Col1='Val3'/> <I Col1='Val4'/> </B> </Body> <Foot> <I Col1='Footer row's val1'/> <I Col1='Footer row's val2'/> </Foot> </Grid> |
Show example | Show data source | |
|
Columns are defined inside <Cols> section as tag
<C>.
Column sets type and format of values. Also sets way of displaying (width and position), but only when configuration is not loaded from cookies. Also sets many other options like buttons, editing or focusing possibilities and many more. Column captions are defined in <Header> tag according their names. |
<Grid> <Cfg id='Simple4'/> <Cols> <C Name='A'/> <C Name='B' Type='Float' Format='$#####0.00' Width='70'/> <C Name='C' Type='Date' Format='ddd MM/dd/yyyy' EditFormat='d.M.yyyy'/> <C Name='D' Type='Enum' Enum='|one|two|three'/> </Cols> <Header A='desc' B='price' C='date' D='option'/> <Body> <B> <I A='Text 1' B='0' C='1/1/2000' D='0'/> <I A='Text 2' B='1.199' C='12/31/2000' D='1'/> <I A='Text 3' B='-654' C='7/12/1900' D='2'/> <I A='Text 4' B='-1.054' C='5/20/2010' D='1'/> </B> </Body> </Grid> |
Show example | Show data source | |
|
Fixed columns can be defined on left inside <LeftCols> tag and/or right inside <RightCols> tag.
Fixed columns are always visible and cannot be scrolled. The grid must be wide enough to display all fixed columns. The data format is the same as in variable columns (compare to previous examples, columns 'A' and 'D' were just moved to another section, nothing else). |
<Grid> <Cfg id='Simple5'/> <LeftCols> <C Name='A'/> </LeftCols> <Cols> <C Name='B' Type='Float' Format='$#####0.00' Width='70'/> <C Name='C' Type='Date' Format='ddd MM/dd/yyyy' EditFormat='d.M.yyyy'/> </Cols> <RightCols> <C Name='D' Type='Enum' Enum='|one|two|three'/> </RightCols> <Header A='desc' B='price' C='date' D='option'/> <Body> <B> <I A='Text 1' B='0' C='1/1/2000' D='0'/> <I A='Text 2' B='1.199' C='12/31/2000' D='1'/> <I A='Text 3' B='-654' C='7/12/1900' D='2'/> <I A='Text 4' B='-1.054' C='5/20/2010' D='1'/> </B> </Body> </Grid> |
Show example | Show data source | |
|
<Grid> <Cfg id='Simple6' MainCol='Order'/> <Cols> <C Name='Order' Width='150'/> <C Name='Rank'/> </Cols> <Body> <B> <I Order='1.' Rank='1'> <I Order='1a.' Rank='2'> <I Order='1a. I' Rank='3'/> </I> <I Order='1b.' Rank='2'> <I Order='1b. I' Rank='3'> <I Order='1b. Ia' Rank='4'/> </I> <I Order='1b. II' Rank='3'/> </I> </I> <I Order='2.' Rank='1'/> <I Order='3.' Rank='1' Expanded='0'> <I Order='3a.' Rank='2'/> <I Order='3b.' Rank='2' Expanded='0'> <I Order='3b. I' Rank='3'/> </I> </I> </B> </Body> </Grid> |
|
Show example | Show data source | |
|
You can change visibility of left panel icons in
<Panel>,
toolbar buttons in
<Toolbar>
and configuration menu items in
<MenuCfg>.
In trial version you cannot hide toolbar or render it into tag outside the grid. You can change grid icons and sizes in <Img> tag. Styles you can change globally for whole page by linking grid CSS styles into page or for individual cells by their attributes ClassOuter, ClassInner, ClassEdit You can also include HTML code before and after any cell value by attribute HtmlPrefix and HtmlPostfix. Dynamically you can change styles and colors by JavaScript API events OnGetClass and OnGetColor. See also answer to How can I change style or background color of the cell, row or column?. |
<Grid> <Img Grid='GridGame.gif'/> <Cfg id='Simple7' MainCol='A'/> <Cols> <C Name='A' Width='80'/> <C Name='C' Type='Date' Width='90'/> <C Name='B' Type='Float'/> </Cols> <Body> <B> <I A='Parent' B='1.12' C='1/1/2000'> <I A='Child' B='1.4' C='1/2/2000'/> <I A='Child' B='1.3' C='1/3/2000'/> </I> <I A='Parent' B='0.96' C='1/1/2001' Expaned='0'> <I A='Child' B='1.4' C='1/2/2001'/> <I A='Child' B='1.3' C='1/3/2001'/> </I> </B> </Body> <Toolbar Save='0' Reload='1' Repaint='0' Add='0' AddChild='0' Sort='0' Calc='0' ExpandAll='0' CollapseAll='0' Cfg='1' Help='0'/> <MenuCfg ShowDeleted='0' AutoSort='0' AutoUpdate='0' Separator1='0' MouseHover='1' ShowDrag='1' ShowPanel='1' ShowIcons='0'/> <Panel Visible='0'/> </Grid> |