TreeGrid expert tutorial

Previous <<< Editing tutorial Next >>> Row's identification tutorial
Back to Index


 

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

  
 
 

Cell spanning and merging

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

User rows and columns

Show example
  • You can include to grid any HTML code or even JavaScript in column with Type="Html" or special row <User> or <Space>.
  • The user row is fixed (in <Head> or <Foot> section).
  • The space row is solid (in <Solid> section), 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. But can contain user defined and positioned cells. To include custom Html code use its Html attribute or define Type="Html" cell.
  • You can use style width:100% because the content is automatically resized when column changed its width.
  • User and space rows with Html attribute and HTML columns cannot be edited. User and Space rows with Html attribute cannot be focused.
  • In HTML columns you must not change row height or set <Cfg VarHeight='1'>.
 Show data source 
<Grid>
   <Cfg id='Expert2' VarHeight='1'/>
   <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>
   <Solid>
      <I Space='1' 
         Html='&lt;div style="background:#ccc;width:100%;"&gt;This is space row&lt;/div&gt;'/>
      <I Space='5' 
         Html='&lt;div style="background:#eed;width:100%;"&gt;This is also space row&lt;/div&gt;'/>
   </Solid>
   <Head>
      <User
         LeftVal='&lt;input type="button" value="press" onclick="alert(&apos;User row button&apos;)"&gt;'
         MidVal='&lt;input type="text" value="???" style="width:100%;border-left:0px solid;border-right:0px solid;"&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;Html col button&apos;)" &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>
      <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>
  
 
 

Header

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

Paging

Show example
  • 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 three data sources, one for layout, one for body and one for page. Therefore uses different tag <treegrid Layout_Url="Expert4 Layout.xml" 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.
 Show layout source Show body source Show page source
Layout.xml 
<Grid>
  <Cfg MainCol='A' id='Expert4'
       ChildPaging="3" Paging="3"/>
  <Cols>
    <C Name='A' Width='130'></C>
  </Cols>
  <Foot><I Kind="Pager"/></Foot>
  <Pager Caption='All pages'/>
</Grid>
Body.xml 
<Grid>
  <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>
</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>
  
 
 

Dragging

Show example
  • Here 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.
  • To just copy rows instead of moving, set attribute <Cfg DragCopy='1'/> in source grid.
 Left source Main source Right source
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>
  
 
 

Maximizing or resizing grid and relative height and width

Show example
  • You can let user to resize main div tag width and/or height by setting <Cfg ResizingMain='?'/>.
  • Or you can maximize main div tag, you can set <Cfg MaxHeight='1' or MaxWidth='1'>.
  • Or you can let grid to show all its content without scrolling by <Cfg NoHScroll='1' NoVScroll='1'/>.
  • To resize grid to fill the whole main div tag you can set <Cfg ConstHeight='1' or ConstWidth='1'>. The ConstHeight attribute adds one RelHeight row, the ConstWidth attribute adds one RelWidth column.
  • 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. After the relative is resized, it loose the its relative width. To restore it, minimize the column width to 0. You can set its minimal width by MinWidth.
  • You can set relative height of fixed <User>' row or solid 'Space' space row by RelHeight attribute. 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.
 Show data source 
 
<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>
  
 
 

Master / detail tables

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

Master / detail trees

Show example

  • 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 source Master page 3 source Detail source
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>
  
 
 

Special rows done by Space rows

Show example
  • Special space rows Group, Search and Toolbar you can create also manually by Space row.
  • You can do it to merge functionality of the special rows to one row or to extend their functionality.
  • You can also learn here, how to define Space row cells, especially Actions and Formulas.
  • In example is always the first special row and next bellow is the same row done by Space row.
  • All functionality can repeated except <Toolbar> resize button functionality and TreeGrid link look.
 Show data source 
<Grid>
   <Cfg id="Expert9" ResizingMain='3' GroupMain='A' ConstHeight="1" SaveAttrs="S5,List,S5a,List" />
   <Cols>
      <C Name="id" Type="Text"/>
      <C Name="A" Type="Text"/>
      <C Name="B" Type="Text"/>
      <C Name="C" Type="Float"/>
      <C Name="D" Type="Enum" Enum="|Zero|One|Two|Three|Four|Five|Six|Seven|Eight|Nine|Ten"/>
      <C Name="E" Type="Date"/>
   </Cols>
   <Header
      id="id" 
      A="Text1"
      B="Text2"
      C="Float"
      D="Enum"
      E="Date"
      />
   <Body>
      <B>
         <I id="r01" A="James Smith" B="Paris" C="10.3" D="1" E="1/1/2000"/>
         <I id="r02" A="Mark Jones" B="London" C="12" D="2" E="6/25/2007"/>
         <I id="r03" A="Eric Walker" B="Berlin" C="-10.3" D="1" E="1/1/2000"/>
         <I id="r04" A="James King" B="London" C="1200" D="6" E="12/31/1999"/>
         <I id="r05" A="Henry Smith" B="Rome" C="0.03" D="8" E="6/24/2007"/>
         <I id="r06" A="Carl Hill" B="Paris" C="12.45" D="0" E="4/8/2004"/>
         <I id="r07" A="Mark Brown" B="Lisboa" C="0.345" D="10" E="10/20/2001"/>
         <I id="r08" A="Joe Walker" B="Berlin" C="-12" D="3" E="10/20/2001"/>
         <I id="r09" A="Eric Jones" B="Prague" C="-0.345" D="4" E="4/16/1994"/>
         <I id="r10" A="James Smith" B="New York" C="4560" D="10" E="6/25/2007"/>
         <I id="r11" A="Jack Reed" B="Madrid" C="1200" D="2" E="4/13/2010"/>
         <I id="r12" A="Mark Brown" B="Budapest" C="10.3" D="7" E="5/6/2002"/>
         <I id="r13" A="Jack Rogers" B="Moscow" C="12" D="1" E="2/18/1999"/>
         <I id="r14" A="James Davis" B="Prague" C="-0.345" D="9" E="4/12/2006"/>
         <I id="r15" A="Fred James" B="Moscow" C="12.46" D="9" E="3/25/2005"/>
         <I id="r16" A="Billy Smith" B="Rome" C="-1200" D="2" E="1/24/2000"/>
      </B>
   </Body>
   <Solid>
      <Group
         List='|None|Text2|Enum|Text->Enum|Enum->Text2'
         ListCustom='Unknown'
         Cols='||B|D|B,D|D,B'
         Types='||0|0|0|0'
         Custom='1'
         />
      <I Cells='List,Custom' Space='1' NoColor='1' CanFocus='0'
         ListType='Select'
         ListDefaults='|None|Text2|Enum|Text->Enum|Enum->Text2'
         ListAction='Grid.GroupRows(choose(null,null,["","B","D","B,D","D,B"]),choose(null,null,[null,0,0,0,0]));'
         ListFormula='choose(Grid.GroupCols.join(","),["","B","D","B,D","D,B"],null,"Unknown")'
         CustomType='DropCols'
         CustomText='To group by drag column caption here ...'
         CustomCanFocus='0'
         CustomAction='Grid.GroupRows(Row[Col])'
         CustomFormula='Grid.GroupCols.join(",")'
         CustomRelWidth='1'
         />
      <Search id="S1" Space="4" Cells="Expression" ExpressionAction="Filter"/>
      <I id="S1a" Space="4" Cells="Expression"
         ExpressionType="Text"
         ExpressionRelWidth="1"
         ExpressionAction="Grid.SearchExpression=Value;Grid.SearchRows('Filter');"
         ExpressionFormula="Grid.SearchExpression"
         ExpressionCanEdit='1'
         Height="18"
         NoColorState="1"
         />
      <Search id="S2" Space="4" Cells="Expression,Filter,Select,Mark,Find,Clear,Help"/>
      <I id="S2a" Space="4" Cells="Expression,Filter,Select,Mark,Find,Clear,Help"
         ExpressionType="Text"
         ExpressionRelWidth="1"
         ExpressionAction="Grid.SearchExpression=Value;"
         ExpressionFormula="Grid.SearchExpression"
         ExpressionCanEdit='1'
         FilterType="Button"
         FilterCaption="Filter"
         FilterAction="Grid.SearchRows('Filter');"
         SelectType="Button"
         SelectCaption="Select"
         SelectAction="Grid.SearchRows('Select');"
         MarkType="Button"
         MarkCaption="Mark"
         MarkAction="Grid.SearchRows('Mark');"
         FindType="Button"
         FindCaption="Find"
         FindAction="Grid.SearchRows('Find');"
         ClearType="Button"
         ClearCaption="Clear"
         ClearAction="Grid.SearchRows('Clear');"
         HelpType="Button"
         HelpCaption="Help"
         HelpAction="Grid.SearchRows('Help');"
         NoColorState="1"
         />
      <Search id="S3" Space="4" Cells="Expression,Actions,Search,Clear"/>
      <I id="S3a" Space="4" Cells="Expression,Actions,Search,Clear"
         ExpressionType="Text"
         ExpressionRelWidth="1"
         ExpressionAction="Grid.SearchExpression=Value;"
         ExpressionFormula="Grid.SearchExpression"
         ExpressionCanEdit='1'
         ActionsType="Select"
         ActionsDefaults="|Filter|Select|Mark|Find"
         Actions="Filter"
         SearchType="Button"
         SearchCaption="Search"
         SearchAction="Grid.SearchRows(Actions);"
         ClearType="Button"
         ClearCaption="Clear"
         ClearAction="Grid.SearchRows('Clear');"
         NoColorState="1"
         />
      <Search id="S4" Space="4" Cells="Cols,Case,Type"
         ColsLabel="Columns"
         ColsDefaults="|All|Text1|Text2|Text1 &amp; Text2|Float|Enum|Date"
         ColsCols="||A|B|A,B|C|D|E"
         ColsToolTip="Searches only in selected columns"
         CaseLabel="Case sensitive"
         TypeLabel="Search in cells"
         NoColor="1"
         />
      <I id="S4a" Space="4" Cells="ColsLabel,Cols,CaseLabel,Case,TypeLabel,Type"
         ColsLabelType="Html"
         ColsLabel="Columns"
         ColsLabelCanFocus="0"
         ColsLabelWidth="-1"
         ColsLabelNoColor="1"
         ColsLabelToolTip="Searches only in selected columns"
         ColsType="Select"
         ColsDefaults="|All|Text1|Text2|Text1 &amp; Text2|Float|Enum|Date"
         ColsAction="Grid.SearchCols=choose(null,null,['','A','B','A,B','C','D','E']);Grid.SearchRows('Refresh');"
         ColsFormula="choose(Grid.SearchCols,['','A','B','A,B','C','D','E'])"
         ColsWidth="100"
         ColsToolTip="Searches only in selected columns"
         CaseLabelType="Html"
         CaseLabel="Case sensitive"
         CaseLabelCanFocus="0"
         CaseLabelWidth="-1"
         CaseLabelNoColor="1"
         CaseType="Bool"
         CaseWidth="-1"
         CaseAction="Value?Grid.SearchType|=4:Grid.SearchType&amp;=~4;Grid.SearchRows('Refresh');"
         CaseFormula="Grid.SearchType&amp;4?1:0"
         CaseCanEdit="1"
         TypeLabelType="Html"
         TypeLabel="Search in cells"
         TypeLabelToolTip="Searches only in cells, only for Mark and Find action"
         TypeLabelCanFocus="0"
         TypeLabelWidth="-1"
         TypeLabelNoColor="1"
         TypeType="Bool"
         TypeWidth="-1"
         TypeAction="Value?Grid.SearchType|=1:Grid.SearchType&amp;=~1;Grid.SearchRows('Refresh');"
         TypeFormula="Grid.SearchType&amp;1"
         TypeCanEdit="1" 
         NoColor="1"
         />
      <Search id="S5" Space="4" Cells="List,Actions"
         ListWidth="150" 
         ListDefaults="|None|This year|Last year|April|Positive float|Rome|London or Paris|James from London|Eight or less then four"
         ListExpressions="@@Date>=1/1/2007 AND Date&lt;1/1/2008@Date>=1/1/2006 AND Date&lt;1/1/2007@(new window.Date(Date)).getMonth()==3@Float>=0@Text2 = Rome@Text2==London or Text2==Paris@Text2==London and Text1 starts James@Enum==8 || Enum&lt;4"
         ActionsAction="Refresh"
         />
      <I id="S5a" Space="4" Cells="List,Actions"
         ListType="Select" ListWidth="150" 
         ListDefaults="|None|This year|Last year|April|Positive float|Rome|London or Paris|James from London|Eight or less then four"
         ListAction="Grid.SearchExpression=choose(null,null,['',
            'Date>=1/1/2007 AND Date&lt;1/1/2008',
            'Date>=1/1/2006 AND Date&lt;1/1/2007',
            '(new window.Date(Date)).getMonth()==3',
            'Float>=0',
            'Text2 = Rome',
            'Text2==London or Text2==Paris',
            'Text2==London and Text1 starts James',
            'Enum==8 || Enum&lt;4'
            ]);Grid.SearchRows(Actions)"
         ActionsType="Select"
         ActionsDefaults="|Filter|Select|Mark|Find"
         Actions="Filter"
         NoColorState="1"
         />
      <I id='Toolbar' Space='5' CanFocus='0' NoColor='1'
         Cells='Reload,Print,Add,Sort,Calc,Columns,MenuCfg,Help,Link,Formula,Resize'
         ReloadType='Button' ReloadIcon='1'
         ReloadAction='Grid.ControlPanel.Click("Reload")' 
         ReloadToolTip='Reload grid, cancel changes'
         PrintType='Button' PrintIcon='15'
         PrintAction='Grid.ControlPanel.Click("Print")' 
         PrintToolTip='Print grid'
         AddType='Button' AddIcon='3'
         AddAction='Grid.ControlPanel.Click("Add")' 
         AddToolTip='Add new row or move or copy selected rows'
         SortType='Button' SortFormula='Grid.Sorted'
         SortIcon='6' SortIconChecked='5' 
         SortAction='Grid.ControlPanel.Click("Sort")' 
         SortToolTip='Enable sorting and re-sort rows now'
         SortToolTipChecked='Disable sorting to rearange sorting faster'
         CalcType='Button' CalcFormula='Grid.Calculated'
         CalcIcon='8' CalcIconChecked='7'
         CalcAction='Grid.ControlPanel.Click("Calc")' 
         CalcToolTip='Enable calculations and re-calculate grid now'
         CalcToolTipChecked='Disable calculations to edit cell values faster'
         ColumnsType='Button' ColumnsIcon='13'
         ColumnsAction='Grid.ControlPanel.Click("Columns")' 
         ColumnsToolTip='Displays menu to choose visible columns'
         MenuCfgType='Button' MenuCfgIcon='11'
         MenuCfgAction='Grid.ControlPanel.Click("MenuCfg")' 
         MenuCfgToolTip='TreeGrid user settings'
         HelpType='Button' HelpIcon='12'
         HelpAction='Grid.ControlPanel.Click("Help")'
         HelpToolTip='Show help for TreeGrid control'
         LinkType='Link'
         LinkRelWidth='1'
         Link='|http://www.treegrid.com|EJS TreeGrid'
         LinkClassOuter='none'
         FormulaType='Html'
         FormulaFormula='countrows()+" rows"'
         FormulaWidth='-1'
         FormulaClassOuter='GControlPanelFormula'
         ResizeType='Button'
         ResizeIcon='14'
         ResizeToolTip='Out of order ...'
         />
      </Solid>
   <Toolbar
      Formula='countrows()+" rows"'
      />
</Grid>
  

Previous <<< Editing tutorial Next >>> Row's identification tutorial
Back to Index