TreeGrid row's identification tutorial
Previous <<< Expert tutorial
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>
            <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="IdX ... .xml" Upload_Data="<Grid></Grid>"> </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 | Setting row id attribute | Show data source
| 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. |
    <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>
Show example | Setting characters to generate new ids from | Show data source
| 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! |
    <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>
Show example | Using one editable column as unique id | Show data source
| 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. |
    <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>
Show example | Using one editable column as unique id in tree | Show data source
| 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. |
    <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>
Show example | Using more (editable) columns as unique id | Show data source
| 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. |
    <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>
Show example | Custom id generating on server or by API | Data source Sample server response
| 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
    <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