TreeGrid advanced tutorial

Previous <<< Basic tutorial |  | Next >>> Calculations tutorial

These tutorials show using more functions in TreeGrid.
They show using column and cell types, formats and permissions, sorting, filters, default rows and defaults children.
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="AdvancedX ... .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 types | Show data source
| By default all values in column have the same Type, Format and other setting. You can override this setting for any cell you need, see cell reference You access given attribute by column name + attribute name. This is the internal format, you can also use other three formats. Remember, sorting still runs according column's type and other values are converted to this type to compare them. You can also change the cell setting dynamically by TreeGrid JavaScript API events OnGetType, OnGetFormat and OnGetEnum. |
    <Grid>
      <Cfg id="Advanced1"/>
      <Cols>
        <C Name="A" Width="200"/>
      </Cols>
      <Body>
        <B>
          <I A="Text 1" />
          <I A="100" AType="Int" />
          <I A="10.5" AType="Float"
             AFormat="$###.00"/>
          <I A="12/31/2000" AType="Date"
             AFormat="MM/dd/yyyy"/>
          <I A="12/31/2000" AType="Date"
             AFormat="ddd dd.MM.yyyy"
             AEditFormat="dd.MM.yy"/>
          <I A="Text 2" AButton="Button"
             AButtonText="press"
             AWidthPad="30"/>
          <I A="1" AType="Enum"
             AEnum="|alfa|beta|gama|delta"/>
        </B>
      </Body>
    </Grid>
Show example | Cell formats | Show data source
| For any column and even for any cell you can specify formating strings to display its value(s). Display format you can specify in Format attribute and editing format in EditFormat. Format string differs according to cell type, there are three basic options: text, number and date / time. All format strings possibilities are described in Cell format documentation. To use HTML tags to change graphic layout, you can use cell attributes HtmlPrefix HtmlPostfix. Also the display format can return HTML tags if <Cfg NoFormatEscape ='1'> is set. To provide extended way of editing, you can show button for any column by attribute <C Button ='???'>. Supported types are None, Button, Img, Date. For column of type Date is default button "Date". To display time values it is better to set it back to "None". You can also change format dynamically by JavaScript API events OnGetFormat and OnGetEnum. |
    <Grid>
      <Cfg id='Advanced2' Version='2'
           NoFormatEscape='1'/>
      <Cols>
        <C Name='A' Type='Text' Width='50'/>
        <C Name='B' Type='Float' Width='80'
           Format='0.00'/>
        <C Name='C' Type='Float' Width='80'
           Format='0.00'/>
        <C Name='D' Type='Date' Width='110'
           Format='M/d/yyyy'/>
        <C Name='E' Type='Date' Width='70'
           Format='hh:mm:ss' Button='None'/>
      </Cols>
      <Body>
        <B>
          <I A='Text' B='-123456.789' BFormat=''
             C='0.032' CFormat='' D='12/31/2002'
             DFormat='' E='20:30:05' EFormat=''/>
          <I A='Text' AFormat='|1' B='-123456.789'
             C='0.032' D='12/31/2002' E='20:30:05'/>
          <I A='Text' AFormat='|2'
             B='-123456.789' BFormat='$#####0".-"'
             C='0.032' CFormat='$#####0".-"'
             D='12/31/2002' DFormat='ddd d.M. yyyy'
             E='20:30:05' EFormat='hh:mm:ss tt'/>
          <I A='Text' AFormat='|1|-. | .-'
             B='-123456.789'
             BFormat='$#####0;!!! $#####0;"nothing"'
             C='0.032'
             CFormat='$#####0;!!! $#####0;"nothing"'
             D='12/31/2002' DFormat='dddd'
             E='20:30:05' EFormat='h:m:s tt'/>
          <I A='Text' AFormat='|0|| ...'
             B='-123456.789' BFormat='0.000 E+00'
             C='0.032' CFormat='0.000 E+00'
             D='12/31/2002' DFormat='yyyy, MMMM'
             E='20:30:05' EFormat='HH:mm'/>
          <I A='Text' AFormat='|2|||e|g|'
             B='-123456.789' BFormat='000.00 (E000)'
             C='0.032' CFormat='000.00 (E000)'
             D='12/31/2002' DFormat='MMM"&apos;"yy'
             E='20:30:05' EFormat='""h'/>
          <I A='Text' AFormat='|1|||[tx]|g|($&amp;)'
             B='-123456.789' BFormat=',0.00'
             C='0.032' CFormat=',0.00'
             D='12/31/2002' DFormat='M/d hh:mm:ss'
             E='20:30:05' EFormat='mm:ss'/>
          <I A='Text' AFormat='|0|- | -|\w|g|*'
             B='-123456.789' BFormat='0,,.00000" x 1e6"'
             C='0.032' CFormat='0,.00000" x 1e3"'
             D='12/31/2002' DFormat='MM-dd-yy\/hh.mm'
             E='20:30:05' EFormat='t\&apos;h:m'/>
          <I A='Text'
             AFormat='|0|&lt;B style="color:blue;">|&lt;/B>'
             B='-123456.789'
             BFormat='"&lt;B>"#######0.##"&lt;/B>";"&lt;B style=&apos;color:red;&apos;>"#######0.##"&lt;/B>"'
             C='0.032'
             CFormat='"&lt;B>"#######0.##"&lt;/B>";"&lt;B style=&apos;color:red;&apos;>"#######0.##"&lt;/B>"' D='12/31/2002' DFormat='MM/dd/"&lt;B style=&apos;color:red;&apos;>"yyyy"&lt;/B>"'
             E='20:30:05' EFormat='"&lt;B>"HH:mm"&lt;/B>"'/>
          <I A='Text' AFormat='|0|&lt;I>|&lt;/I>'
             B='-123456.789' BFormat='c'
             C='0.032' CFormat='c'
             D='12/31/2002'
             DFormat='"&lt;B>"ddd"&lt;/B> - &lt;I>"MMMM"&lt;/I>"'
             E='20:30:05'
             EFormat='"&lt;B>"HH"&lt;/B>":mm:"&lt;I>"ss"&lt;/I>"'/>
          <I A='Text' AFormat='|1|&lt;B>- | -&lt;/B>'
             B='-123456.789' BFormat='p'
             C='0.032' CFormat='p'
             D='12/31/2002'
             DFormat='"&lt;B>"ddd"&lt;/B>" M/d "&lt;I>&apos;"yy"&lt;/I>"'
             E='20:30:05'
             EFormat='"&lt;SPAN style=&apos;background-color:#AAF;&apos;>"hh:mm:ss"&lt;/SPAN>'/>
          <I BType='Text' CType='Text'
             D='12/31/2002' DFormat='d'
             E='20:30:05' EFormat='t'/>
          <I BType='Text' CType='Text'
             D='12/31/2002' DFormat='Y'
             E='20:30:05' EFormat='T'/>
        </B>
      </Body>
    </Grid>
Show example | Permissions | Show data source
| By default all capabilities are permitted if don't collide with other settings. Permission settings are processed in this order: grid, cell, cell of default row, row, default row, column, default column. If any of the attribute has value, processing ends and the value is used. For whole grid you can prohibit capability in <Cfg> tag - Editing, Deleting, Selecting, Adding, Sorting, Dragging, ColMoving, ColResizing. For cell you can use: CanEdit, CanFocus. Not focused cell cannot be edited. For row you can use: CanEdit, CanFocus, CanDelete, CanSelect, CanDrag, CanFilter. For column you can use: CanEdit, CanFocus, CanResize, CanMove, CanFilter, CanSort, CanHide, CanCopy. You can also control permissions dynamically by JavaScript API events OnCanEdit, OnCanRowAdd, OnCanRowDelete, OnCanDrag. |
    <Grid>
      <Cfg id='Advanced3'/>
      <Cols>
        <C Name='A' Type='Text' Width='50'/>
        <C Name='B' Type='Text' Width='50'
           CanEdit='0' CanSort='0'/>
        <C Name='C' Type='Text' Width='50'
           CanSort='0' CanFilter='0'/>
        <C Name='D' Type='Text' Width='50'
           CanFocus='0' CanResize='0'
           CanMove='0'/>
        <C Name='E' Type='Text' Width='50'/>
      </Cols>
      <Head>
        <I Kind='Filter'/>
      </Head>
      <Body>
        <B>
          <I CanFilter='0' A='Text' B='Text'
             C='Text' D='Text' E='Text'/>
          <I CanFilter='0' CanDrag='0'
             CanDelete='0' A='Text' B='Text'
             C='Text' CCanFocus='0' D='Text'
             E='Text'/>
          <I CanEdit='0' A='Text' B='Text'
             C='Text' D='Text' E='Text'/>
          <I A='Text' B='Text' BCanEdit='1'
             C='Text' D='Text' DCanFocus='1'
             E='Text'/>
          <I CanFocus='0' A='Text' B='Text'
             C='Text' D='Text' E='Text'/>
          <I CanDelete='0' CanSelect='0'
             A='Text' B='Text' C='Text'
             D='Text' E='Text'/>
          <I CanDrag='0' A='Text' B='Text'
             C='Text' CCanEdit='0' D='Text'
             E='Text'/>
          <I CanSelect='0' A='Text'
             ACanFocus='0' B='Text' C='Text'
             D='Text' E='Text' ECanEdit='0'/>
          <I A='Text' B='Text' C='Text'
             D='Text' E='Text'/>
        </B>
      </Body>
    </Grid>
Show example | Sorting | Show data source
| Only variable rows are sorted. In tree are children rows sorted independently. Sorting can be done according up to 3 columns. Values are always sorted according column type (see column 'E' does number sort). Predefined sorting you can control by <Cfg> attributes Sorted, SortCols and SortTypes. These values are used only for first time, next are loaded from cookies (you can change this behavior by ...Lap, Version or id attributes). The way of string sorting you control by column attributes SortType and WhiteChars. You can ignore case (column 'B'), ignore spaces (column 'C'), ignore custom white spaces (column 'D'). You can also provide predefined values for sorting by cell attributes SortValue and SortDescValue to ensure the sort order independently on cell value or let some rows to be still on top or bottom. You can control sorting dynamically by API event OnGetSortValue or you can do your own sorting in event OnSort. By <Cfg> attribute SortIcons you can set if columns sorts after click to whole caption or icon only or to hide icons fully (you can modify CSS style GHeader to change cursor). |
    <Grid>
      <Cfg id='Advanced4' Sorted='1'
           SortCols='D,E,A' SortTypes='0,1,0'
           SortIcons='1'/>
      <Cols>
        <C Name='A' Type='Text' Width='50'/>
        <C Name='B' Type='Text' Width='50'
           SortType='4'/>
        <C Name='C' Type='Text' Width='50'
           SortType='8'/>
        <C Name='D' Type='Text' Width='50'
           SortType='12' WhiteChars=' _'/>
        <C Name='E' Type='Int' Width='50'/>
      </Cols>
      <Body>
        <B>
          <I A='AAA1' B='AAA1' C='AAA1'
             D='AAA1' E='AAA1' EType='Text'/>
          <I A='BBB2' B='BBB2' C='BBB2'
             D='BBB2' E='BBB2' EType='Text'/>
          <I A='aaa3' B='aaa3' C='aaa3'
             D='aaa3' E='aaa3' EType='Text'/>
          <I A='bbb5' B='bbb4' C='bbb3'
             D='bbb2' E='bbb1' EType='Text'/>
          <I A='bbb1' B='bbb2' C='bbb3'
             D='bbb4' E='bbb5' EType='Text'/>
          <I A='  aaa5' B='  aaa5'
             C='  aaa5' D='  aaa5'
             E='  aaa5' EType='Text'/>
          <I A=' bbb6' B=' bbb6' C=' bbb6'
             D=' bbb6' E=' bbb6'
             EType='Text'/>
          <I A='_a_a_a7' B='_a_a_a7'
             C='_a_a_a7' D='_a_a_a7'
             E='_a_a_a7' EType='Text'/>
          <I A='_aaa8' B='_aaa8' C='_aaa8'
             D='_aaa8' E='_aaa8'
             EType='Text'/>
          <I A='10' AType='Int' B='10'
             BType='Int' C='10' CType='Int'
             D='10' DType='Int' E='10'/>
          <I A='20' AType='Int' B='20'
             BType='Int' C='20' CType='Int'
             D='20' DType='Int' E='20'/>
          <I A='100' AType='Int' B='100'
             BType='Int' C='100' CType='Int'
             D='100' DType='Int' E='100'/>
          <I A='200' AType='Int' B='200'
             BType='Int' C='200' CType='Int'
             D='200' DType='Int' E='200'/>
        </B>
      </Body>
    </Grid>
Show example | Filters | Show data source
| Filter you can add as fixed row (into <Head> or <Foot> section) with attribute Kind="Filter". Predefined filter values you can set as cell values in filter and filter operator as cell attribute Filter. Predefined values are used only if configuration is not loaded from cookies. If you want to not filter some row, set its attribute CanFilter="0". If you want to not filter in whole column, set the column attribute CanFilter="0". If you want to not filter some row by specified column, set the cell attribute CanFilter="0". In this case you have to set also column's attribute CanFilter="2". If you want to hide rows in tree if they has hidden all children set row's attribute CanFilter="2". In this case you have to set also <Cfg> attribute FilterEmpty="1". You can let user to choose from given list of values or some or all values in this column in other rows by Button="Defaults". To get count of all or filtered rows you can use function countrows. You can also provide predefined values for filtering by cell attribute FilterValue to run filter independently on cell value. You can control filtering dynamically by API event OnGetFilterValue and / or OnRowFilter or you can do your own sorting in event OnCanFilter. |
    <Grid>
      <Cfg id='Advanced5' MainCol='A'
        FilterEmpty='1'/>
      <Cols>
        <C Name='A' Width='110'/>
        <C Name='B' Type='Int' Width='40'/>
        <C Name='C' Type='Float' Width='60'/>
        <C Name='D' Type='Date' Width='100'/>
        <C Name='E' Type='Enum' Width='60'
           Enum='|alfa|beta|gama|delta'/>
      </Cols>
      <Head>
        <I Kind='Filter' A='F' AFilter='11'
           AButton='Defaults'
           ADefaults='|*RowsVariable'/>
      </Head>
      <Body>
        <B>
          <I A='One' B='1' C='1.0'
             D='1/1/2000' E='0'/>
          <I A='Two' B='2' C='-1.0'
             D='1/11/2000' E='1'/>
          <I A='Three' B='3' C='121.3'
             D='6/3/1999' E='3'/>
          <I A='Four' B='4' C='-331'
             D='12/31/2006' E='2'/>
          <I A='Five' B='5' C='16.43'
             D='5/15/2005' E='1'
             CanFilter='1'>
            <I A='Five One' B='6' C='1000'
               D='3/7/2002' E='1'/>
            <I A='Five Two' B='7' C='453.2'
               D='8/21/2002' E='1'/>
            <I A='Five Three' B='8' C='-3000'
               D='7/12/2003' E='3'/>
            <I A='Five Four' B='9' C='567'
               D='5/25/2006' E='0'/>
            <I A='Five Five' B='10' C='-0.03'
               D='3/17/2100' E='2'/>
          </I>
        </B>
      </Body>
      <Foot>
        <I Calculated='1' CanEdit='0'
           AFormula = '"Displayed: "+countrows(4) + " / " + countrows(5)'
           BType='Text' CType='Text' EType='Text'/>
      </Foot>
    </Grid>
Show example | Grouping | Show data source
| You can group rows in tables and even in trees. In tree you can group only one level from existing tree, usually root level, the first level of rows with CanGroup='1'. In tree you cannot ungroup rows already positioned in tree in input XML data. Grouping you can provide by grouping row, a fixed row with Kind='Group'. This row is specific space row, not divided to cells or sections. Where the row is placed is not set by its section (head/foot), but by its attribute Space. User can group rows in two ways - by selecting predefined grouping from combo on grouping row (see attributes List, ListWidth, ListCustom, Cols, Types) or by dragging column's caption to grouping row (see attribute Custom). You can permit one or both methods by setting appropriate attributes of the grouping row. The rows are grouped in tree as children of new added rows. These rows have Def='Group'. Therefore by defining the default row named "Group" you can preset attributes of group rows, usually hide other cell values by Visible attribute or use some aggregate function. You can pre-select grouping by <Cfg> attributes GroupCols, GroupTypes, GroupMain. If you use server paging, you have to provide your own grouping on server according to sent attributes GroupCols and GroupTypes, similarly to sorting. You can suppress grouping according to some column by CanGroup attribute and also you can more control grouping by column attribute GroupType. To control grouping from client script you can use OnGroup and OnGroupFinish events and DoGrouping API method. |
    <Grid>
      <Cfg id='Advanced8'
        GroupMain='A' GroupCols='C'/>
      <Cols>
        <C Name='A' Width='110'/>
        <C Name='B' Type='Int' Width='40'/>
        <C Name='C' Type='Float' Width='60'/>
        <C Name='D' Type='Date'
           Width='100'/>
        <C Name='E' Type='Enum' Width='60'
          Enum='|alfa|beta|gama|delta'/>
      </Cols>
      <Def>
        <D Name='Group'
           Calculated='1' CalcOrder='B'
           ACanEdit='1' BFormula='sum()'
           CVisible='0' DVisible='0'
           EVisible='0'
           />
      </Def>
      <Head>
        <I Kind='Group'
           List='|None|By A|By A&amp;B|By C'
           ListCustom='Custom'
           ListWidth='70'
           Cols='||A|A,B|C'
           Custom='1'
           />
      </Head>
      <Body>
        <B>
          <I A='One' B='1' C='1.0'
             D='1/1/2000' E='0'/>
          <I A='One' B='1' C='1.0'
             D='1/11/2000' E='1'/>
          <I A='One' B='2' C='2.0'
             D='6/3/1999' E='3'/>
          <I A='Two' B='1' C='7'
             D='12/31/2006' E='2'/>
          <I A='Two' B='1' C='7'
             D='5/15/2005' E='1'/>
          <I A='Three' B='1' C='12'
             D='3/7/2002' E='1'/>
          <I A='Four' B='1' C='12'
             D='8/21/2002' E='1'/>
          <I A='Four' B='2' C='1.0'
             D='7/12/2003' E='3'/>
          <I A='Four' B='3' C='1.0'
             D='5/25/2006' E='0'/>
          <I A='Five' B='1' C='1.0'
             D='3/17/2100' E='2'/>
        </B>
      </Body>
    </Grid>
Show example | Default rows | Show data source
| For every row you can set its default row by Def attribute. From default row are read all row's values and setting that are missing in the row's source data. Every row without Def attribute has default row named "R" and defined in file ../Grid/Defaults.xml. Default rows are defined in section <Def> by tag <D> with attribute Name. Any attribute of default row can be (re)defined (even row named "R") in (next)loaded data. |
    <Grid>
      <Cfg id="Advanced6"/>
      <Cols>
        <C Name="A"/>
        <C Name="B" Type="Date"/>
      </Cols>
      <Header A="default" B="data"/>
      <Def>
        <D Name="R" A="none"
           B="12/31/2000 16:35:23"/>
        <D Name="D1" A="def 1"
           BFormat="M/d/yyyy"/>
        <D Name="D2" A="def 2"
           BFormat="hh:mm:ss"/>
        <D Name="D3" BFormat="dddd"/>
        <D Name="D4" A="def 4" Def="D2"/>
      </Def>
      <Body>
        <B>
          <I Def="D1"/>
          <I Def="D2"/>
          <I Def="D3"/>
          <I Def="D4"/>
          <I/>
          <I Def="D1"/>
          <I Def="D1" B="1/1/2000"/>
          <I BFormat="" BCanEdit="0"/>
        </B>
      </Body>
    </Grid>
Show example | Default children | Show data source
| For every row you can set default row for its children by CDef attribute. This default row is used for all immediate children as their default row, but only if their have not used own Def attribute. This default row is also used as default row for all new children added to the row. The default row for all root rows can be set as attribute CDef in tag <Header>. |
    <Grid>
      <Cfg id="Advanced7" MainCol="Rank"/>
      <Cols>
        <C Name="Rank" Width="200"/>
      </Cols>
      <Def>
        <D Name="R" Rank="Level 5"/>
        <D Name="D1" Rank="Level 1"
           CDef="D2"/>
        <D Name="D2" Rank="Level 2"
           CDef="D3"/>
        <D Name="D3" Rank="Level 3"
           CDef="D4"/>
        <D Name="D4" Rank="Level 4"/>
      </Def>
      <Header CDef="D1"/>
      <Body>
        <B>
          <I>
             <I>
                <I/>
                <I>
                   <I>
                      <I/>
                      <I/>
                   </I>
                   <I/>
                </I>
                <I>
                   <I/>
                   <I/>
                </I>
             </I>
             <I/>
             <I>
                <I/>
                <I>
                   <I/>
                </I>
             </I>
          </I>
        </B>
      </Body>
    </Grid>

Previous <<< Basic tutorial |  | Next >>> Calculations tutorial