Tutorial 3 - First Sight Of Sigma Visual Tree Grid

When it comes to database, we can't do without grid component. Sigma Visual builder offers a very powerful grid for data sorting, grouping, paging, filtering and so on.
Let's drag a [treegrid] to design area. It brings grid header with 4 columns and 3 rows as example data when created.
Let's have a look of table header. You can get/change header info like this.(Click [treegrid] to select it，click on right side of [Component Config Window]->[properties]->[header]，a small button will appear. Click this button, a dialog box will pop up). The code in popup dialog reads

Code above is for one column only, I omit the last three ones.Let't have a look of table rows. (Click [treegrid] to select it，click on right side of [Component Config Window]->[properties]->[header]，a small button will appear. Click this button, a dialog box will pop up). The row code in popup dialog reads

It looks a little complex because treegrid could support very complex data presentation. Let's simplfy it first. By far a 2d array is enough for us.
Delete all the codes in code dialog. Just input the following 4 line.

What happen after you close dialog by clicking [OK]. Content of treegrid changes. Only two lines left. Actually we could make this change by coding.Let's get started with this application.

[Req Spec]
1. A treegrid and a button are needed.
2. When end user click button, treegrid shows two rows.

[Do It Yourself]
Drag an [treeGrid] to design area, set [alias] to "treegrid1"(Click [input] to select it, type "treegrid1" in [Component Config Window]->[alias]，and strike [Enter] on keyboard).
2. Drag a [Button] to design area.
3. Add event handler for button being clicking. (Click button to select it，click on right side of [Component Config Window]->[events]->[onClick]，a small button will appear. Click this button, a dialog box will pop up.)
4. You will see the following lines in the dialog

5.Add code like this.

6. Click [OK] to close dialog.
7. Press [run] to see the result.