Using Grid component creating tree format

Using edittyp, displaytype=tree on Grid, we can represent DataSet content into tree format

Data structure for configuring Tree

If we want to represent the tree, we should have label and level column in Dataset.

Setting displaytype and edittype in Grid's cell

In order to set Tree structure on the Grid, cell property should be changed like below.
displaytype= tree
edittype = tree

Specifying the column to show the Tree Item

Specifying the level of the tree

Source Location

Sample\Grid\np_Tree_Basic.xfdl

Setting TextColor depending on level

We can specify different Text Colors on tree depending on the level.

Setting level's color by using expr on cell's color property

Source Location

Sample\Grid\np_Tree_LebelColor.xfdl

Property of image to be used on Tree

treeitemimage

This property is used to set image on tree cell of tree leaf. In the case if there is no node, then image will be set on the row.

treecollapseimage

This property is used to show image when tree is collapsed, shrink the size of the tree. In other words this shows the image on open [+] button on tree cell.

treeexpandimage

This property is used to show image on tree cell when the tree is expanded, the image is shown on the tree cell's close [-] button.

Source Location

Sample\Grid\np_Tree_ImageType.xfdl

Way of applying specific image on the Tree

This explains how to set  image on tree.

Theme image

This is the way to use images including on declared theme on ADL, after selecting Theme which is used in Tool, we can see the images list.

Setting Grid Cell

Web Image

This is the way to use image on the web. We should enter the URL path for calling web. We can set on the Grid cell like below.

Local Image

We can use local images using prefix after setting the local path. We can specify Prefix by double click on TypeDefinition then we can specify the prefix in the services tab.

Setting TypeDefinition

Setting Grid Cell (prefix name::image name)

Global Image

We can set the image on GlobalVariable's Image Tag.
This is the way to add image on GlobalVariables.
Right click mouse on GlobalVariables> Insert GlobalVariables Item> Image dialog window pops up, select the image and then click the Open button, then the Image will be added.

Setting image name on Grid Cell

Source Location

Sample\Grid\np_Tree_Image.xfdl

Spacing by level

Using Padding property of Tree, we can manage space on different levels.

Setting padding using expr

Below is the code content for padding

this.fn_getlvl = function(lvl){
 if(lvl==2) return '0 0 0 50'; 
}

Source Location

Sample\Grid\np_Tree_Space.xfdl

Editing Tree text column

If you are using a Grid as a tree of cells commonly used by binding edit, the binding component is used for the input.
In case of we want direct editing on the Grid, we can implement after changing edittype property.

Setting editautoselect cell property

Main Source Content

this.grd_output_onselectchanged = function(obj:Grid, e:nexacro.GridSelectEventInfo)
{
 this.grd_output.setCellProperty( "Body", 0, "edittype", "tree");
}
 
this.grd_output_oncelldblclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
 if (e.col == 0)
 {
  this.grd_output.setCellProperty( "Body", 0, "edittype", "normal");
 } 
}

When we double click on Tree Label's cell, edittype need to be changed to normal, after changing the column value. We need to change edittype to Tree structure again like above coding.

Source Location

Sample\Grid\np_Tree_Edit.xfdl