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