TreeGrid row's identification tutorial

Previous <<< Expert tutorial
Back to Index


 

These tutorials show how to identify rows on server when uploading changes or using server ChildPaging.

On server side is row identified by its id (both letters small) attribute. This attribute must contain enough information to unique identify the row. These tutorials show possibilities how to generate this attribute for various needs.
All these tutorials show in the first left column "Gen id" generated id attribute. The "Tmp" column has no effect to ids.
You can add row(s) to see how new id will be generated.
Also you can change column values if id is generated from editable columns to see if and how is id changed to be still unique.
And you can simulate saving updates to server to see how the id is updated after successful upload.
Remember, id attribute value is case sensitive.

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="IdX ... .xml" Upload_Data="<Grid></Grid>"> </treegrid>
        </div>
    </body>
</html>
  
 
 

Setting row id attribute

Show example
  • This is the basic option. Set id attribute of every row to unique string. This string can contain all letters and '_'.
  • New row will get new id generated from these characters.
  • The new generated id is always the highest id in the grid.
 Show data source 
<Grid>
  <Cfg id='Id1'/>
  <LeftCols>
    <C Name='id' CanEdit='0'/>
  </LeftCols>
  <Cols>
    <C Name='A'/>
  </Cols>
  <Header id='Gen id' A='Tmp'/>
  <Body>
    <B>
      <I id='A' A='Val1'/>
      <I id='B' A='Val2'/>
      <I id='C' A='Val3'/>
      <I id='D' A='Val4'/>
    </B>
  </Body>
</Grid>
  
 
 

Setting characters to generate new ids from

Show example
  • You can set characters that will be used to generate id by <Cfg IdChars='???'/>
  • The characters will be used in the order they are stored in the string IdChars.
  • If you want to generate number id, you can set <Cfg IdChars='0123456789' NumberId='1'/>.
  • If you want to start new ids from some id, you can set <Cfg LastId='???'/> to id before the first generated new id.
  • You can also use LastId if you are using server paging and TreeGrid does not know the highest id in the grid.
  • You can set prefix and postfix that are added to new id by <Cfg IdPrefix='' IdPostfix=''/>. If you set prefix and postfix, all your ids (and also LastId if used) must contain them!
 Show data source 
<Grid>
  <Cfg id='Id2' LastId='R99X'
    IdChars='0123456789' NumberId='1' 
    IdPrefix='R' IdPostfix='X'/>
  <LeftCols>
    <C Name='id' CanEdit='0'/>
  </LeftCols>
  <Cols>
    <C Name='A'/>
  </Cols>
  <Header id='Gen id' A='Tmp'/>
  <Body>
    <B>
      <I id='R1X' A='Val1'/>
      <I id='R2X' A='Val2'/>
      <I id='R3X' A='Val3'/>
      <I id='R4X' A='Val4'/>
    </B>
  </Body>
</Grid>
  
 
 

Using one editable column as unique id

Show example
  • You can identify your rows by any string and let user to set or change this unique identifier manually. TreeGrid ensures that all ids will be unique by appending generated postfix to changed ids.
  • Set <Cfg IdNames='ColName' AppendId='1' IdChars='0123456789' NumberId='1'/>
  • IdNames contain column name where your unique identifier is set, this column is usually used as primary key in your database table.
  • When user adds new row or changes value in id column to not unique id the value will be regenerated according to AppendId value. If AppendId='1' to the existing or default value will be appended generated postfix. If AppendId='0' the value will be overwritten by new generated id, but remember, in this case all the values must contain only characters from IdChars.
  • You can set IdChars and NumberId to different values to generate other prefixes.
  • You can set LastId to start from another index, for example '1' starts from index '2'.
  • You can set IdCompare='4' if your unique identifiers are case insensitive.
  • Remember, if changed value contains '$', this character is converted to '_' in generated id.
 Show data source 
<Grid>
  <Cfg id='Id3' IdNames='U' AppendId='1' 
    IdChars='0123456789' NumberId='1' 
    LastId='1' IdCompare='4'/>
  <LeftCols>
    <C Name='id' CanEdit='0'/>
  </LeftCols>
  <Cols>
    <C Name='U'/>
    <C Name='A'/>
  </Cols>
  <Header id='Gen id' U='Unique' 
    A='Tmp'/>
  <Def>
    <D Name='R' U='New name' 
      A='New val'/>
  </Def>
  <Body>
    <B>
      <I U='David' A='Val1'/>
      <I U='Jan' A='Val2'/>
      <I U='Linda' A='Val3'/>
      <I U='Adam' A='Val4'/>
    </B>
  </Body>
</Grid>
  
 
 

Using one editable column as unique id in tree

Show example
  • By default the id parameter does not include any information about row position in tree.
  • You can set <Cfg FullId='1'. Now all ids contain parent's id as prefix, separated by '$'.
  • In deep tree, row id contains all parent's ids, because row's parent also contains its parent id.
  • See also using CDef atribute in <Header> and <D> tags to control what rows can be added as their children.
  • All other attributes can be used in the same way as in previous example.
  • Remember, if column value contains '$', this character is converted to '_' in generated id.
 Show data source 
 
<Grid>
  <Cfg id='Id4' MainCol='U' 
    FullId='1' IdNames='U' AppendId='1' 
    IdChars='0123456789' NumberId='1' 
    LastId='1' IdCompare='4'/>
  <LeftCols>
    <C Name='id' CanEdit='0' 
      Width='115'/>
  </LeftCols>
  <Cols>
    <C Name='U' Width='95'/>
    <C Name='A' Width='30'/>
  </Cols>
  <Header id='Gen id' U='Unique' 
    A='Tmp' CDef='Project'/>
  <Def>
    <D Name='Project' CDef='R' 
      U='New project' Spanned='1' 
      USpan='2'/>
    <D Name='R' CDef='' U='Name' 
      A='New'/>
  </Def>
  <Body>
    <B>
      <I U='Project1'>
        <I U='David' A='V1-1'/>
        <I U='Linda' A='V1-3'/>
        <I U='Adam' A='V1-4'/>
      </I>
      <I U='Project2'>
        <I U='David' A='V2-1'/>
        <I U='Jan' A='V2-2'/>
        <I U='Linda' A='V2-3'/>
      </I>
    </B>
  </Body>
</Grid>
  
 
 

Using more (editable) columns as unique id

Show example
  • You can identify row by more row attributes. You can set their names as comma separated list to <Cfg IdNames='???'/>
  • When user adds new row or changes value in some identifier column and the id will became nonunique, the last attribute value (from the IdNames) will be regenerated.
  • Therefore the last item in IdNames must be column name. But the column need not be editable or visible.
  • Other items in IdNames can be column names (editable or read only, visible or hidden), standard row attributes like Def or any user defined attribute filled in <I> tag.
  • The attributes in IdNames must not be id attribute or any array attribute like Enum.
  • The unique id attribute generated from the IdNames contains all their values separated by '$'.
  • Other id attributes like FullId, AppendId or IdChars can be used in the same way as in previous examples.
 Show data source 
 
<Grid>
  <Cfg id='Id5' IdNames='N,S,U' 
    IdChars='01234567890' NumberId='1' 
    IdCompare='4'/>
  <LeftCols>
    <C Name='id' CanEdit='0' Width='90'/>
  </LeftCols>
  <Cols>
    <C Name='N' Width='40'/>
    <C Name='S' Width='55'/>
    <C Name='U' Type='Int' Width='45'/>
    <C Name='A' Width='30'/>
  </Cols>
  <Header id='Gen id' N='Name' S='Surname' 
    U='Unique' A='Tmp'/>
  <Body>
    <B>
      <I N='David' S='Smith' U='1' A='Val1'/>
      <I N='David' S='Smith' U='2' A='Va2'/>
      <I N='Linda' S='Hall' U='1' A='Val3'/>
      <I N='Adam' S='Clark' U='1' A='Val4'/>
      <I N='David' S='Lewis' U='1' A='Val5'/>
      <I N='Jan' S='Rodriguez' U='1' A='Val6'/>
      <I N='Linda' S='Lewis' U='1' A='Val7'/>
      <I N='Linda' S='Hall' U='2' A='Val8'/>
      <I N='Linda' S='Hall' U='3' A='Val9'/>
    </B>
  </Body>
</Grid>
  
 
 

Custom id generating on server or by API

Show example
  • You can generate ids by server script. Let TreeGrid to generate unique id of new (or changed) rows by any method described in previous three examples (don't use direct setting of id attribute). And when changes are saved to server, the server changes the identity attribute(s) and sends it (them) back. The id attribute must be still the same to identify row on client. The id attribute is changed by TreeGrid according to changes sent from server.
  • Server returns the data in the same XML as TreeGrid updates changes: <Grid><Changes><I id='orig id' Changed='1' ColName='New id'/></Changes></Grid>.
  • You can also generate ids in JavaScript API events OnGenerateId and OnSetRowId. You can also use events like OnValueChanged to control user editing of identity columns.
 Data source Sample server response
Data source 
<Grid>
  <Cfg id='Id6' IdNames='U'/>
  <LeftCols>
    <C Name='id' CanEdit='0'/>
  </LeftCols>
  <Cols>
    <C Name='U' CanEdit='0'/>
    <C Name='A'/>
  </Cols>
  <Header id='Gen id' U='Unique' A='Tmp'/>
  <Body>
    <B>
      <I U='_' A='Val1'/>
      <I U='A' A='Val2'/>
      <I U='B' A='Val3'/>
      <I U='C' A='Val4'/>
    </B>
  </Body>
</Grid>
Server sample response 
<Grid>
  <IO Result='0' 
    Message='Uploaded successfully. 
      See ids if and how changed&#x0a;
      Remember, as server response 
      is used static file,&#x0a; 
      so the returned ids are NOT UNIQUE.'/>
  <Changes>
    <I id='_' U='ServerId1' Changed='1'/>
    <I id='A' U='ServerId2' Changed='1'/>
    <I id='B' U='ServerId3' Changed='1'/>
    <I id='C' U='ServerId4' Changed='1'/>
    <I id='D' U='ServerId5' Changed='1'/>
    <I id='E' U='ServerId6' Changed='1'/>
  </Changes>
</Grid>
  

Previous <<< Expert tutorial
Back to Index