{ _: 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())); } }, } }