TreeGrid basic tutorial

Next >>> Advanced tutorial
Back to Index


 

These tutorials show using TreeGrid on HTML page.

They show how to create:

  • empty grid
  • variable and fixed rows
  • variable and fixed columns
  • tree and changing basic setting

Every example can be used on single page with this structure:

<html>
    <head>
        <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.

  
 
 

Basic (empty) grid

Show example
The simplest grid must have:
  • At least one variable column (<Cols> section with one < C> sub-section).
  • All columns must be named (attribute Name).
  • One (even empty) page (<Body> < B/> </Body>)
  • It should have set id attribute in <Cfg> to let it save configuration to cookies.
Show data source
<Grid>
  <Cfg id='Simple1'/>
  <Cols>
    <C Name='Col1'/>
  </Cols>
  <Body>
    <B/>
  </Body>
</Grid>
  
 
 

(Variable) rows

Show example
  • 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>).
  • The variable rows are basic rows that contain data and only these rows can be sorted, filtered, grouped, searched, paged, and nested in tree.
  • Values for columns are set to attributes according to column names.
  • Here 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 Id tutorial.
Show data source
<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>
  
 
 

Fixed rows

Show example
  • 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 vertically. The grid must be high enough to display all fixed rows.
  • Fixed rows are not paged, sorted, searched, filtered, grouped and cannot be nested in tree.
  • The cell data format is the same as in variable rows.
  • Fixed rows can be standard data rows and there also two special fixed rows:
    • Filter (user interface for filtering rows according to individual columns) and
    • User (shows custom HTML code, spanned to column sections).
Show data source
<Grid>
  <Cfg id='Simple3'/>
  <Cols>
    <C Name='Col1'/>
  </Cols>
  <Head>
    <I Col1='Header row&apos;s val1'/>
  </Head>
  <Body>
    <B>
      <I Col1='Val1'/>
      <I Col1='Val2'/>
      <I Col1='Val3'/>
      <I Col1='Val4'/>
    </B>
  </Body>
  <Foot>
    <I Col1='Footer row&apos;s val1'/>
    <I Col1='Footer row&apos;s val2'/>
  </Foot>
</Grid>
  
 
 

Space rows

Show example
  • Space rows can be defined in <Solid> tag as <I> or <Space> tag. The position in grid is set by its Space attribute
  • Space row is not divided to column sections, is still visible and never scrolled. It is placed to table between other rows sections. Cannot be sorted, filtered, selected, deleted, added or dragged. Cannot have child rows. Cannot have spanned cells (it has no meaning, you can define all the cells, positions and widths).
  • Space row can contain cells, that have not the same layout as grid columns, but rather have its own width and position. Those cells are not affected by columns resize or move.
  • Space rows can be standard data rows and there also four special space rows:
    • Group (user interface for grouping rows according to selected columns),
    • Search (user interface for searching and advanced filtering).
    • SimplePager (user interface for page navigation, cannot have cells).
    • Toolbar (user interface for running predefined or custom actions from toolbar).
  • All these special rows can also be created by pure Space row by setting appropriate cells.
Show data source
<Grid>
   <Cfg id='Simple8'/>
   <Cols>
      <C Name='Col1'/>
      <C Name='Col2'/>
      <C Name='Col3' Width='250'/>
      <C Name='Col4'/>
   </Cols>
   <Solid>
      <I Space='0' Cells='A' 
         A='Space=0'/>
      <I Space='1' Panel='1' Cells='A,B' 
         A='Space=1'/>
      <I Space='2' 
         Html='Space=2, without cells'/>
      <I Space='3' Cells='X,Y' 
         X='Space=3, Height=30' 
         XWidth='130' YRelWidth='1' 
         Y='RelWidth' Height='30'/>
      <I Space='4' Cells='A,B' 
         A='Space=4' ACanFocus='0'/>
      <I Space='5' Cells='X,Y,Z' 
         X='Space=5' 
         NoColor='1' CanFocus='0'/>
   </Solid>
   <Head>
      <I Col1='Head'/>
   </Head>
   <Foot>
      <I Col1='Foot'/>
   </Foot>
   <Body>
      <B>
         <I Col1='Body'/>
         <I Col1='Body'/>
      </B>
   </Body>
</Grid>
  
 
 

(Variable) columns

Show example
  • 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.
Show data source
<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>
  
 
 

Fixed columns

Show example
  • 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).
Show data source
<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>
  
 
 

Tree

Show example
  • To show rows in tree, you must set MainCol attribute of <Cfg> to column name (not caption), where the tree will be shown.
  • To nest rows inside others, just place <I> tags inside their parent <I> tags.
  • You can set Expanded attribute to '0' to collapse row's children.
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>
  
 
 

Settings and styles

Show example
Show data source
<Grid>
  <Styles Style='Office'/>
  <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 Styles='1' 
        Cells='Cfg,Styles'/>
  <MenuCfg ShowDeleted='0' AutoSort='0' 
           AutoUpdate='0' Separator1='0' 
           MouseHover='1' ShowDrag='1' 
           ShowPanel='1' ShowIcons='0'/>
  <Panel Copy='1' Move='1' 
        Select='0' Delete='0'/>
</Grid>
  
Next >>> Advanced tutorial
Back to Index