B4J Tutorial [BANanoWebix] Lesson 14 - The TreeTable

Hi

The tree-table is a combination of the tree and the data-table.

To create the tree-table, one needs to add the columns they will need, then indicate which column should feature the tree structure and then add data to it.

To create columns we use the WixDataColumn class we saw for the datatable. Let's create a tree-table with 3 columns and the 'Candy Bars' column the 'treeview' section.

Dim prop As WixTreeTable
    prop.Initialize("treetable").Setborderless(True)
    prop.SetStyle("margin", "10px")
    prop.SetSelect(prop.DT_SELECT_ROW)
    prop.SetAutoWidth(True).SetEditable(True)
    '
    Dim c1 As WixDataColumn
    c1.Initialize1(prop, "id").SetHeader("#").Setwidth(50).SetSort("string").pop1
    '
    Dim c2 As WixDataColumn
    c2.Initialize1(prop, "value").Setheader("Candy Bars").SetTemplate("{common.treetable()} #value#").Setwidth(300).Setsort("string").Pop1
    '
    Dim c3 As WixDataColumn
    c3.Initialize1(prop, "nutsornot").Setheader("Nuts?").Setwidth(180).SetSort("string").Pop1

We set the selection model for it being the complete row and then add the columns setting their widths.

We then add flat data to it that we later unflatten to form the tree we need.

prop.AddItem("", "1", "Hershey", CreateMap(), True)
    prop.AddItem("1", "1.1", "Almond Joy", CreateMap("nutsOrNot" : "Has Nuts"),False)
    prop.AddItem("1", "1.2", "Hershey's Kisses", CreateMap("nutsOrNot" : "No Nuts"), True)
    prop.AddItem("1.2", "1.2.1", "Milk Chocolate With Almonds", CreateMap("nutsOrNot" : "Oh Yeah, Except These"), False)
    '
    Dim data As List = pg.Unflatten(prop.Items, "data")
    prop.SetData(data)