TK.Tree

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

Filter

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));
            }
        }
    }
}

Dynamic add items when expanded

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

Ajax tree

Retrieve tree rows with ajax.

    {
        Elements: {
            AjaxTree:{
                _: TK.AjaxTree,
                Url: 'TreeExample.txt'
            },
            AjaxFormTree: {
                _: TK.AjaxFormTree,
                Url: 'TreeExample.txt'
            }
        }
    }
    

Tree forms

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