Toolkit

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

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

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.

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

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