{
_: TK.Tree,
Rows: [
{ Id: 1, ParentId: null, Text: "Item 1"},
{ Id: 2, ParentId: 1, Text: "Sub Item 1"},
{ Id: 3, ParentId: 1, Text: "Sub Item 2 "},
{ Id: 4, ParentId: 2, Text: "Sub Sub Item 1 "},
{ Id: 5, ParentId: 2, Text: "Sub Sub Item 2 "}
],
RowClick: function(row) {
alert(JSON.stringify(row));
}
}
Use the following method to filter the contents of the tree: .ApplyFilter(filter, showAllChildNodes, callBackFoundRows), last 2 are optional parameters.
{
Elements: {
SearchInput: {
onkeyup: function() {
// Second parameter is to always show all elements below
this.Near("Tree").ApplyFilter(this.value, true);
}
},
Tree: {
_: TK.Tree,
Rows: [
{ Id: 1, ParentId: null, Text: "Fruit"},
{ Id: 2, ParentId: 1, Text: "Citrus"},
{ Id: 3, ParentId: 2, Text: "Orange"},
{ Id: 4, ParentId: 2, Text: "Grapefruit"},
{ Id: 5, ParentId: 2, Text: "Mandarin"},
{ Id: 6, ParentId: 2, Text: "Lime"},
{ Id: 7, ParentId: 1, Text: "Berries"},
{ Id: 8, ParentId: 7, Text: "Strawberries"},
{ Id: 9, ParentId: 7, Text: "Raspberries"},
{ Id: 10,ParentId: 7, Text: "Blueberries"},
{ Id: 11,ParentId: 7, Text: "Kiwifruit"},
{ Id: 12, ParentId: 1, Text: "Apple"},
{ Id: 13, ParentId: null, Text: "Vegetables"},
{ Id: 14, ParentId: 13, Text: "Leafy green"},
{ Id: 15, ParentId: 14, Text: "Lettuce"},
{ Id: 16, ParentId: 14, Text: "Spinach"},
{ Id: 17, ParentId: 13, Text: "Cruciferous"},
{ Id: 18, ParentId: 17, Text: "Cabbage"},
{ Id: 19, ParentId: 17, Text: "Cauliflower"}
],
RowClick: function(row) {
alert(JSON.stringify(row));
}
}
}
}
Similar to the TK.Table apply filter, a function can be passed as well.
{
Elements: {
ApplyFilterButton: {
innerText: "Apply filter for fruits longer than 6 characters",
onclick: function() {
this.Near("Tree").ApplyFilter(function(item) {
return item.Text.length > 6;
}, true);
}
},
Tree: {
_: TK.Tree,
Rows: [
{ Id: 1, ParentId: null, Text: "Fruit"},
{ Id: 2, ParentId: 1, Text: "Citrus"},
{ Id: 3, ParentId: 2, Text: "Orange"},
{ Id: 4, ParentId: 2, Text: "Grapefruit"},
{ Id: 5, ParentId: 2, Text: "Mandarin"},
{ Id: 6, ParentId: 2, Text: "Lime"},
{ Id: 7, ParentId: 1, Text: "Berries"},
{ Id: 8, ParentId: 7, Text: "Strawberries"},
{ Id: 9, ParentId: 7, Text: "Raspberries"},
{ Id: 10,ParentId: 7, Text: "Blueberries"},
{ Id: 11,ParentId: 7, Text: "Kiwifruit"},
{ Id: 12, ParentId: 1, Text: "Apple"},
{ Id: 13, ParentId: null, Text: "Vegetables"},
{ Id: 14, ParentId: 13, Text: "Leafy green"},
{ Id: 15, ParentId: 14, Text: "Lettuce"},
{ Id: 16, ParentId: 14, Text: "Spinach"},
{ Id: 17, ParentId: 13, Text: "Cruciferous"},
{ Id: 18, ParentId: 17, Text: "Cabbage"},
{ Id: 19, ParentId: 17, Text: "Cauliflower"}
],
RowClick: function(row) {
alert(JSON.stringify(row));
}
}
}
}
{
_: TK.Tree,
EnableFullRowExpand: true,
Rows: [
{ Id: "a", ParentId: null, Text: "Item 1", AlwaysShowExpandButton: true},
{ Id: "b", ParentId: null, Text: "Item 2", AlwaysShowExpandButton: true}
],
Expanded: function(row, byUserClick, rowElement) {
if (!row.SubRows) {
row.SubRows = [
{ Id: row.Id+"/a", ParentId: row.Id, Text: "Dynamic item 1", AlwaysShowExpandButton: true },
{ Id: row.Id+"/b", ParentId: row.Id, Text: "Dynamic item 2" }
];
this.AddRows(row.SubRows);
}
},
Collapsed: function(row, byUserClick, rowElement) {
},
RowClick: function(row) {
alert(JSON.stringify(row));
}
}
Retrieve tree rows with ajax.
{
_: TK.AjaxTree,
Url: 'TreeExample.txt'
}
By setting the ShowJsonAsTree property to true, a json object can be shown within a tree similar to the array preview in your browsers development console.
{
_: TK.AjaxFormTree,
ShowJsonAsTree: true,
ArrayChildNames: ["Name"],
Url: 'TreeExample.txt'
}
In forms or as a GUI element you want to select nodes in a tree. This can be done in groups or individual level. When saved the Id's are parsed of the selected nodes.
{
Elements: {
Tree: {
_: TK.FormTree,
EnableFullRowExpand: true,
Data: [2,3,7],
Rows: [
{ Id: 1, ParentId: null, Text: "Item 1"},
{ Id: 2, ParentId: 1, Text: "Sub Item 1"},
{ Id: 3, ParentId: 1, Text: "Sub Item 2 "},
{ Id: 4, ParentId: 2, Text: "Sub Sub Item 1 "},
{ Id: 5, ParentId: 2, Text: "Sub Sub Item 2 "},
{ Id: 6, ParentId: 2, Text: "Sub Sub Item 3 "},
{ Id: 7, ParentId: 2, Text: "Sub Sub Item 4 "},
{ Id: 8, ParentId: 2, Text: "Sub Sub Item 5 "},
]
},
Button: {
innerText: 'Save',
onclick: function(){
alert(JSON.stringify(this.Parent.Elements.Tree.GetValue()));
}
}
}
}
By setting the ValueProperty, only rows with that property will have a value. It is also the value which .Data expects and the .GetValue method returns.
{
Elements: {
ValueTree:{
_: TK.FormTree,
EnableFullRowExpand: true,
ValueProperty: 'RealValue',
Data: [1],
Rows: [
{ Id: 1, ParentId: null, Text: "Item 1"},
{ Id: 2, ParentId: 1, Text: "Sub Item 1"},
{ Id: 3, ParentId: 1, Text: "Sub Item 2 "},
{ Id: 4, ParentId: 2, Text: "Sub Sub Item 1 "},
{ Id: 5, ParentId: 2, Text: "Sub Sub Item 2 ", RealValue: 1},
{ Id: 6, ParentId: 2, Text: "Sub Sub Item 3 ", RealValue: 2},
{ Id: 7, ParentId: 2, Text: "Sub Sub Item 4 "},
{ Id: 8, ParentId: 2, Text: "Sub Sub Item 5 "},
]
},
ValueButton: {
innerText: 'Save',
onclick: function(){
alert(JSON.stringify(this.Parent.Elements.ValueTree.GetValue()));
}
},
}
}