TreeGrid expert tutorial

Previous <<< Editing tutorial |  | Next >>> Row's identification tutorial

These tutorials show using more specific functions in TreeGrid.
They show using advanced editing functions, cell spanning, user rows, advanced header, paging and dragging.
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="ExpertX ... .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 | Cell spanning and merging | Show data source
| In TreeGrid you can span cells on any row together. The row with spanned cells must have attribute Spanned='1'. Spanned cell has set attribute Span to count of columns to span (including this cell). Spanned cell shows value of the first (spanned) cell. To display more values in spanned cell, you can use attributes Merge and MergeStart. Merge attribute is set to count of cells to display in the spanned cell and MergeStart attribute sets the first index where to start (0 means spanned cell, 1 next right, ...). In spanned and merged cell can be only one value edited. You can choose it from cells in attribute MergeEdit in the same indexing as MergeStart. You can also show values of merged cell in lines instead of columns, this is controlled by the first bit of MergeType attribute. By the second bit of MergeType you can choose if values of merged cell will be hidden if their column will be hidden. When cells are spanned, there is problem with column moving. You can suppress column moving for whole grid by <Cfg ColMoving='0'> or you can define column groups by settings their Group attribute. Columns can be moved only inside their group and the most left column in group cannot be moved at all. Try also to hide some columns (from menu) to see what will happen. |
    <Grid>
      <Cfg id='Expert1' Sorting='0'/>
      <Def>
        <D Name='C' Width='25'/>
      </Def>
      <Cols>
        <C Name='A' Group='1'/>
        <C Name='B' Group='1'/>
        <C Name='C' Group='1'/>
        <C Name='D' Group='1'/>
        <C Name='E' Group='1'/>
        <C Name='F'/>
        <C Name='G' Group='2'/>
        <C Name='H' Group='3'/>
        <C Name='I' Group='4'/>
        <C Name='J'/>
      </Cols>
      <Body>
        <B>
          <I A='A' B='B' C='C' D='D' E='E'
             F='F' G='G' H='H' I='I' J='J'/>
          <I Spanned='1' ASpan='5' GSpan='2'
             A='A' B='B' C='C' D='D' E='E'
             F='F' G='G' H='H' I='I' J='J'/>
          <I Spanned='1' ASpan='5' HSpan='2'
             A='A' B='B' C='C' D='D' E='E'
             F='F' G='G' H='H' I='I' J='J'/>
          <I Spanned='1' ASpan='5'
             AMerge='5' GSpan='3'
             A='A' B='B' C='C' D='D' E='E'
             F='F' G='G' H='H' I='I' J='J'/>
          <I Spanned='1' ASpan='5'
             AMergeStart='1' AMergeEdit='1'
             AMerge='3'
             A='A' B='B' C='C' D='D' E='E'
             F='F' G='G' H='H' I='I' J='J'/>
          <I Spanned='1' ASpan='5'
             AMergeStart='1' AMergeEdit='2'
             AMerge='2' GSpan='3' GMerge='3'
             A='A' B='B' C='C' D='D' E='E'
             F='F' G='G' H='H' I='I' J='J'/>
          <I Spanned='1' ASpan='5'
             AMergeStart='0' AMergeEdit='3'
             AMerge='5' GSpan='3'
             A='A' B='B' C='C' D='D' E='E'
             F='F' G='G' H='H' I='I' J='J'/>
        </B>
      </Body>
    </Grid>
Show example | User rows and columns | Show data source
| You can include to grid any HTML code or even JavaScript in column with Type="Html" or row with Kind="User" or row with Kind="Space". The user row can be only fixed (in <Head> or <Foot> section). The space row can placed to fixed section only, but is always displayed bellow or above fixed section, according to its attribute Space. The user row is not divided to cells, but only to sections (left, middle, right). The space row is not divided at all. You can use style width:100% because the content is automatically resized when column changed its width. User and space rows and HTML columns cannot be edited. User and space rows cannot be focused. In HTML columns you must not change row height. |
    <Grid>
      <Cfg id='Expert2'/>
      <LeftCols>
        <C Name='A' Width='50'/>
      </LeftCols>
      <Cols>
        <C Name='B' Width='50'/>
        <C Name='C' Width='100'
           Type='Html' CanEdit='0'/>
      </Cols>
      <RightCols>
        <C Name='D' Width='50'/>
      </RightCols>
      <Head>
        <I Kind='User'
           LeftVal='&lt;input type="button" value="press" onclick="alert(&apos;OK ...&apos;)"&gt;'
           MidVal='&lt;input type="text" value="???" style="width:100%;"&gt;'
           RightVal=''
           />
      </Head>
      <Body>
        <B>
          <I A='Text 1' B='Text 2' C='Text 3' D='Text 4'/>
          <I A='Text 1' B='Text 2'
            C='&lt;input type="button" value="press" onclick="alert(&apos;OK&apos;)" class="GButton" &gt;'
            D='Text 4'/>
          <I A='Text 1' B='Text 2' C='Text 3' D='Text 4'/>
          <I A='Text 1' B='Text 2'
            C='&lt;a href="http://www.google.com" &gt;search &lt;/a&gt;'
            D='Text 4'/>
        </B>
      </Body>
      <Foot>
        <I Kind='User'
           LeftVal='&lt;div style="background:#faa;width:100%;"&gt;Left&lt;/div&gt;'
           MidVal='&lt;div style="background:#aaf;width:100%;"&gt;Variable&lt;/div&gt;'
           RightVal='&lt;div style="background:#afa;width:100%;"&gt;Right&lt;/div&gt;'
           />
        <I A='Text 1' B='Text 2' C='Text 3' D='Text 4'/>
      </Foot>
    </Grid>
Show example | Header | Show data source
| The header can contain more rows. In this case you need to set in tag <Header> attributes Rows to number of rows and Main to main row number (from top and 0). The main row is the only one that responds to user and shows column captions. In other rows you can use any HTML code. If you use more rows in header set <Cfg> attribute ColMoving="0" to suppress column draggig. |
    <Grid>
      <Cfg id='Expert3' ColMoving='0'/>
      <LeftCols>
        <C Name='A' Width='40'/>
        <C Name='B' Width='40'/>
      </LeftCols>
      <Cols>
        <C Name='E' Width='50'/>
        <C Name='F' Width='50'/>
        <C Name='G' Width='50'/>
        <C Name='H' Width='50'/>
        <C Name='I' Width='50'/>
      </Cols>
      <RightCols>
        <C Name='C' Width='40'/>
        <C Name='D' Width='40'/>
      </RightCols>
      <Header
        Rows="3"
        Main="2"
        Left00Span="2"
        Right00Span="2"
        Mid01="&lt;CENTER>&lt;B STYLE='color:blue;'>TreeGrid Example&lt;/B>&lt;/CENTER>"
        Mid01Span="3"
        Left10="&lt;I>Left columns&lt;/I>"
        Left10Span="2"
        Right10="&lt;DIV ALIGN=right>&lt;I>Right columns&lt;/I>&lt;/DIV>"
        Right10Span="2"
        Mid10="&lt;CENTER>&lt;I>Editable columns&lt;/I>&lt;/CENTER>"
        Mid10Span="3"
        Mid11="&lt;CENTER>&lt;I>Non editable columns&lt;/I>&lt;/CENTER>"
        Mid11Span="2"
        />
      <Body>
        <B>
          <I/>
          <I/>
          <I/>
        </B>
      </Body>
    </Grid>
Show example | Paging | Show body source Show page source
| For large grids you can use paging. For large trees child paging. There can be server or client paging. The paging is set by <Cfg> attribute Paging. Value 2 means client and 3 server paging. The client paging is set by <Cfg> attribute ChildPaging. Values are the same as in Paging. More information you can find there and there. This example uses two data sources, one for body and one for page. Therefore uses different tag <treegrid Data_Url="Expert4 Body.xml" Page_Url="Expert4 Page.xml"></treegrid>. This example shows server paging and server child paging. The most of data is loaded on request from ...page.xml by id attribute. See, for child paging you need to set row's Expanded="0" and Count to supposed number of children. See rows 'r2' and 'r3' what happens if Count is wrong or even there is no children for the row. Also, in this example is not implemented sorting. When used server paging, the server must sort data by itself. You can set <B> attributes Name and Title or NameXY to set page caption and tooltip in pager. There are possible two pager types: default vertical pager on the right with page names, controlled by <Pager> tag and horizontal bottom pager added by fixed row <I Kind='Pager'/> with page indexes. | Body.xml
    <Grid>
      <Cfg MainCol='A' id='Expert4'
           ChildPaging="3" Paging="3"/>
      <Cols>
        <C Name='A' Width='130'></C>
      </Cols>
      <Body>
        <B>
          <I id="r1" A="1. row"
             Expanded="0" Count='3'/>
          <I id="r2" A="2. row"
             Expanded="0" Count='1'/>
          <I id="r3" A="3. row"
             Expanded="0" Count='2'/>
        </B>
        <B id="b2" Count="2"/>
        <B id="b3" Count="3"/>
      </Body>
      <Foot><I Kind="Pager"/></Foot>
      <Pager Caption='All pages'/>
    </Grid>
Page.xml
    <Grid>
      <Body>
        <B id="r1">
          <I A="1. row, 1. child"/>
          <I A="1. row, 2. child"/>
          <I A="1. row, 3. child"/>
        </B>
        <B id="r2">
          <I A="2. row, 1. child"/>
          <I A="2. row, 2. child"/>
        </B>
        <B id="b2">
          <I A="4.row"/>
          <I id="r4" A="5.row"
             Expanded="0" Count="1"/>
        </B>
        <B id="r4">
          <I A="4.row, 1.child"/>
        </B>
        <B id="b3">
          <I A="6.row"/>
          <I A="7.row"/>
          <I A="8.row"/>
        </B>
      </Body>
    </Grid>
Show example | Dragging | Left source Main source Right source
| There you can test dragging rows by mouse inside one grid or among more grids. You can select more rows and drag them together. All selected rows must have the same Def attribute, in this example must be on the same level. In data you can control dragging by Def and CDef attributes. The dragged row is accepted only if has the same Def attribute as drop target row CDef attribute. Attribute CDef for root level you can set in <Header> tag. You can override drop target acceptance in JavaScript API OnCanDrag event. To suppress dragging for a row set its attribute CanDrag to 1. To suppress dragging for whole grid set <Cfg> attribute Dragging to 0. | Left.xml
    <Grid>
      <Cfg id='Expert5Left' MainCol='A'
            SuppressMessage='1' Deleting='0'
            Version='2' ShowDeleted='0'/>
      <Cols>
        <C Name='A'/>
      </Cols>
      <Def>
        <D Name='Node' CDef='Item'/>
        <D Name='Item'/>
      </Def>
      <Header CDef='Node'/>
      <Body>
        <B>
          <I id='N5' A='Node5'/>
          <I id='N6' A='Node6'/>
          <I id='N7' A='Node7'/>
          <I id='N8' A='Node8'/>
          <I id='N9' A='Node9'/>
        </B>
      </Body>
      <Toolbar Visible='0'/>
    </Grid>
Main.xml
    <Grid>
      <Cfg id='Expert5Main' MainCol='A'
         SuppressMessage='1' Deleting='0'
         Version='1' ShowDeleted='0'/>
      <Cols>
        <C Name='A'/>
        <C Name='B'/>
        <C Name='C'/>
      </Cols>
      <Def>
        <D Name='Node' Calculated='1'
           CDef='Item' CFormula='count()'/>
        <D Name='Item'/>
      </Def>
      <Header CDef='Node'/>
      <Body>
        <B>
          <I id='N1' A='Node1' B='N1'
             Expanded='0'>
            <I id='I1' A='Item1' B='I1'/>
            <I id='I2' A='Item2' B='I2'/>
          </I>
          <I id='N2' A='Node2' B='N2'/>
          <I id='N3' A='Node3' B='N3'>
           <I id='I3' A='Item3'  B='I3'/>
          </I>
          <I id='N4' A='Node4' B='N4'/>
        </B>
      </Body>
      <Toolbar Visible='0'/>
    </Grid>
Right.xml
    <Grid>
      <Cfg id='Expert5Right' MainCol='A'
         SuppressMessage='1' Deleting='0'
         Version='2' ShowDeleted='0'/>
      <Cols>
        <C Name='A'/>
      </Cols>
      <Def>
        <D Name='Item'/>
      </Def>
      <Header CDef='Item'/>
      <Body>
        <B>
          <I id='I4' A='Item4'/>
          <I id='I5' A='Item5'/>
          <I id='I6' A='Item6' CanDrag='0'/>
          <I id='I7' A='Item7'/>
          <I id='I8' A='Item8'/>
          <I id='I9' A='Item9'/>
        </B>
      </Body>
      <Toolbar Visible='0'/>
    </Grid>
Show example | Resizing grid and relative height and width | Show data source
| You can set relative width of column by its RelWidth attribute. Relative columns fill entire remaining width of main tag in proportion to their RelWidth attribute. Relative columns are not resizeable. You can set its minimal width by MinWidth. You can set relative height of fixed row by setting <I Kind='User' or 'Space' RelHeight='???'/>. Relative rows fill entire remaining height of main tag in proportion to their RelHeight attribute. You can set minimal height of the row by MinHeight. You can let user to resize main tag width and/or height by setting <Cfg ResizingMain='?'/>. Instead of resizing main tag by user you can maximize it by <Cfg MaxWidth='1' MaxHeight='1'/>. Instead of relative width and height you can let grid to show all its content without scrolling by <Cfg NoHScroll='1' NoVScroll='1'/>. |
    <Grid>
      <Cfg id='Expert6' MainCol='A'
        ResizingMain='3'/>
      <LeftCols>
        <C Name='A' Width='50'/>
      </LeftCols>
      <Cols>
        <C Name='B' Width='25'/>
        <C Name='C' RelWidth='60'
          MinWidth='50'/>
        <C Name='D' Width='20'/>
        <C Name='E' RelWidth='40'/>
      </Cols>
      <RightCols>
        <C Name='F' Width='20'/>
      </RightCols>
      <Header NoEscape='1' A='50' B='25'
        C='&lt;B>60%&lt;/B>' D='20'
        E='&lt;B>40%&lt;/B>' F='20'/>
      <Head>
        <I Kind='User' RelHeight='10'
          Class='GFillRow'
          MidVal='&lt;B>10%&lt;/B>'/>
        <I/>
        <I Kind='User' RelHeight='10'
          MidVal='&lt;B>10%&lt;/B> min 20px'
          MinHeight='20'/>
      </Head>
      <Body>
        <B>
          <I>
           <I/>
           <I/>
           <I/>
          </I>
        </B>
      </Body>
      <Foot>
        <I Kind='Space' RelHeight='80'
          Class='GFillRow'
          Html='&lt;B>80%&lt;/B>'/>
        <I/>
      </Foot>
    </Grid>
Show example | Master / detail tables | Master source Detail source
| In few steps you can make master / detail relationship without writting any JavaScript code. First place two grids to page, master and detail grid. All data for both grids fill to master grid. Only master grid will load and save data from and to server. Data for detail grid fill as children of master rows. Master rows are all root rows and will be displayed in master grid. For every master row set Expanded='0' and Detail='Detail_grid_id'. Choose when to display detail rows by master grid's attribute DetailOn (=1 on focus, =2 on click, =3 on dblclick). You can also set master grid's attribute InEditMode='0' to run edit mode after double click instead of simple click. In detail grid set Detail='1' and fill grid layout (colums) and initial data displayed when no master row is shown. If you have one value in more cells (usually in master row and also in detail row), you can use cell attribute CopyTo to copy cell value after change to another cells. | Master
    <Grid>
      <Cfg id='Expert7Master' DetailOn='1'
        InEditMode='0' Dragging='0'/>
      <Cols>
        <C Name='FirstName' Type='Text'/>
        <C Name='Surname' Type='Text'/>
        <C Name='Age' Type='Int'/>
        <C Name='Married' Type='Bool'/>

        <C Name='N' Type='Text' Visible='0'
          CanHide='0'/>
        <C Name='V' Type='Text' Visible='0'
          CanHide='0'/>
      </Cols>
      <Def>
        <D Name='Main'
          Detail='Expert7Detail' Expanded='0'
          FirstNameCopyTo='Child_FirstName,V'
          SurnameCopyTo='Child_Surname,V'
          AgeCopyTo='Child_Age,V'
          MarriedCopyTo='Child_Married,V'
          >
          <I Def='FirstName'/>
          <I Def='Surname'/>
          <I Def='Age'/>
          <I Def='Married'/>
          <I Def='Address'/>
          <I Def='Note'/>
        </D>
        <D Name='FirstName' N='FirstName'
          VCopyTo='Parent,FirstName' V=''/>
        <D Name='Surname' N='Surname' V=''
          VCopyTo='Parent,Surname'/>
        <D Name='Age' N='Age' V=''
          VType='Int' VClassInner='GText'
          VCopyTo='Parent,Age'/>
        <D Name='Married' N='Married' V=''
          VType='Bool' VCopyTo='Parent,Married'/>
        <D Name='Address' N='Address' V=''
          VType='Lines'/>
        <D Name='Note' N='Note' V=''
          VType='Lines'/>
      </Def>
      <Header CDef='Main'
        FirstName='First name'/>
      <Body>
        <B>
          <I Def='Main' FirstName='James'
            Surname='Jackson' Age='24'
            Married='0'>
            <I Def='FirstName' V='James'/>
            <I Def='Surname' V='Jackson'/>
            <I Def='Age' V='24'/>
            <I Def='Married' V='0'/>
            <I Def='Address'
              V='3703 Tenth Ave, New York, NY 10034'/>
            <I Def='Note' V=''/>
          </I>
          <I Def='Main' FirstName='Daniel'
            Surname='Moore' Age='38'
            Married='1'>
            <I Def='FirstName' V='Daniel'/>
            <I Def='Surname' V='Moore'/>
            <I Def='Age' V='38'/>
            <I Def='Married' V='1'/>
            <I Def='Address'
              V='11525 Del Amo Blvd., Cerritos, CA 90703'/>
            <I Def='Note' V=''/>
          </I>
          <I Def='Main' FirstName='Lisa'
            Surname='Moore' Age='12'
            Married='0'>
            <I Def='FirstName' V='Lisa'/>
            <I Def='Surname' V='Lee'/>
            <I Def='Age' V='12'/>
            <I Def='Married' V='0'/>
            <I Def='Address'
              V='11525 Del Amo Blvd., Cerritos, CA 90703'/>
            <I Def='Note'
              V='Daniel's daughter'/>
          </I>
          <I Def='Main' FirstName='Nancy'
            Surname='Allen' Age='65'
            Married='1'>
            <I Def='FirstName' V='Nancy'/>
            <I Def='Surname' V='Allen'/>
            <I Def='Age' V='65'/>
            <I Def='Married' V='1'/>
            <I Def='Address'
              V='701 Howard Road SE, Washington, DC 20020'/>
            <I Def='Note' V=''/>
          </I>
        </B>
      </Body>
    </Grid>
Detail
    <Grid>
      <Cfg id='Expert7Detail' Detail='1'
        VarHeight='1' Dragging='0' Adding='0'
        Deleting='0' Selecting='0' Sorting='0'/>
      <Cols>
        <C Name='N' Type='Text' CanEdit='0'
          Width='100'/>
        <C Name='V' Type='Text' Width='200'/>
      </Cols>
      <Header N='Item' V='Value'/>
      <Body>
        <B>
          <I N='FirstName' V=''/>
          <I N='Surname' V=''/>
          <I N='Age' V=''/>
          <I N='Married' V=''/>
          <I N='Address'/>
          <I N='Note'/>
        </B>
      </Body>
    </Grid>
Show example | Master / detail trees | Master source Master page 3 source Detail source
| You can do master detail trees. In fact you can mark any row in tree as master and specify grid where to fill its children. You can let the master row to show its children also in tree in master grid or you can suppress it by CanExpand='0' Expanded='0'. You can also download content of detail grid from server on demand by using server child paging (ChildPaging='3' in master grid) and setting Count attribute of master row to count of its children. Remember, with server communicates always the master grid. You can control when the master row is displayed in detail grid by master grid attribute DetailOn and also you can choose if the detail is displayed after user expands the master row by DetailExpand (0 - show only, 1 - expand only, 2 - both). When in detail grid is displayed some master row as child, you can also specify if and when are the children of this master row displayed back in detail grid (= browsing the tree) by DetailOn and DetailExpand attributes in detail grid. You can also gain advantage from using filters in both grids. You can drag rows inside or between the grids. You can of course use all options mentioned in previous example. In JavaScript you can use events OnShowDetail and OnShowDetailFinish and functions ShowDetail and RefreshDetail. | Master
    <Grid>
      <Cfg id='Expert8Master' MainCol='A'
        DetailOn='2' DetailExpand='1'
        AutoUpdate='1' ChildPaging='3'
        InEditMode='0'/>
      <Cols>
        <C Name='A' Type='Text' Width='150'/>
        <C Name='B' Type='Int'/>
      </Cols>
      <Def>
        <D Name='R' Calculated='1'
          BFormula='count()' Expanded='0'/>
      </Def>
      <Panel Copy='7'/>
      <Head>
        <I Kind='Filter'/>
      </Head>
      <Body>
        <B>
          <I A='Node 1'
            Detail='Expert8Detail'>
            <I A='Node 1-1'/>
            <I A='Node 1-2'>
              <I A='Node 1-2-1'/>
              <I A='Node 1-2-2'/>
            </I>
            <I A='Node 1-3'
              Detail='Expert8Detail'>
              <I A='Node 1-3-1'/>
              <I A='Node 1-3-2'/>
              <I A='Node 1-3-3'/>
            </I>
            <I A='Node 1-4'/>
          </I>
          <I A='Node 2 not master'>
            <I A='Node 2-1'/>
            <I A='Node 2-2'
              Detail='Expert8Detail'>
              <I A='Node 2-2-1'/>
              <I A='Node 2-2-2'/>
            </I>
            <I A='Node 2-3'
              Detail='Expert8Detail'/>
          </I>
          <I id='N3' A='Node 3 server'
            Detail='Expert8Detail'
            Count='3'/>
          <I A='Node 4 not expand'
            Detail='Expert8Detail'
            CanExpand='0' Expanded='0'>
            <I A='Node 4-1'/>
            <I A='Node 4-2'>
              <I A='Node 4-2-1'/>
              <I A='Node 4-2-2'/>
            </I>
            <I A='Node 4-3'/>
          </I>
        </B>
      </Body>
    </Grid>
Master page 3
    <Grid>
      <Body>
        <B id='N3'>
          <I A='Node 3-1'/>
          <I A='Node 3-2'>
            <I A='Node 3-2-1'/>
          </I>
          <I A='Node 3-3'/>
        </B>
      </Body>
    </Grid>
Detail
    <Grid>
      <Cfg id='Expert8Detail' MainCol='A'
        Detail='1' DetailExpand='1'
        DetailOn='3'/>
      <Cols>
        <C Name='A' Type='Text' Width='150'/>
        <C Name='B' Type='Int'/>
      </Cols>
      <Def>
        <D Name='R' Calculated='1'
          BFormula='count()'/>
      </Def>
      <Panel Copy='7'/>
      <Head>
        <I Kind='Filter'/>
      </Head>
      <Body>
        <B/>
      </Body>
    </Grid>

Previous <<< Editing tutorial |  | Next >>> Row's identification tutorial