TreeGrid basic tutorial
Next >>> Advanced tutorial
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>
            <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 | Basic (empty) grid | Show data source
| 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. |
    <Grid>
      <Cfg id='Simple1'/>
      <Cols>
        <C Name='Col1'/>
      </Cols>
      <Body>
        <B/>
      </Body>
    </Grid>
Show example | (Variable) rows | 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 | Fixed rows | 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&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>
Show example | (Variable) columns | 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 | Fixed columns | 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 | Tree | Show data source
| 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. |
    <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 | Settings | 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>

Next >>> Advanced tutorial