TreeGrid advanced tutorial

Previous <<< Basic tutorial Next >>> Features tutorial
Back to Index


 

These tutorials show using more functions in TreeGrid.

They show using column and cell types, formats and permissions, default rows and defaults children.

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

  
 
 

Cell types

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

Cell formats

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

Permissions

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

Default rows

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

Default children

Show example
  • 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 <Root>.
 Show data source 
 
<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 >>> Features tutorial
Back to Index