Skip to main content

RamBase Guidelines

TreeView

UI element for presenting trees

treeview1.PNG
Treeview2.PNG

Development guideline

Example of a typical treeview:

<div kendo-tree-view data-k-options="vm.menuItemsOptions">
            <div k-template>
            <i class={{dataItem.iconName}}></i>
            <span ng-bind="dataItem.title"></span>      
    </div>
</div>

// In viewmodel
var read = function(options) {
    var url = "system/api/documentationtree/{documentationTreeId}/childnodes?$orderby=Title";
    if (options.data.treeId) { //Read after expand
        url = url.replace(/{documentationTreeId}/, options.data.treeId);
    }
    else { //Initial read
        url = url.replace(/{documentationTreeId}/, "0");
    }
    
    ds.executeQuery(url).then(function(response) {
        options.success(response)
    })
}

var dataSource = new kendo.data.HierarchicalDataSource({
    transport: {
        read: read,
    },
    schema: {
        data:function(data) {
            return data.documentationTree;
        },
        model: {
            id: "treeId",
            hasChildren: true
        }
    }
});

vm.menuItemsOptions = {      
    dataSource: dataSource
}

Attributes

  • kendo-tree-view: Access the kendo treeview widget instance. Ex. kendo-tree-view="vm.menuItemsModel"

  • k-on-change: Triggered when selecting a treenode. Ex. k-on-change="vm.onChange(kendoEvent)"

  • k-on-expand: Triggered when expanding a treenode. Ex. k-on-expand="vm.onExpand(kendoEvent)"

  • k-on-collapse: Triggered when collapsing a treenode. Ex. k-on-collapse="vm.onCollapse(kendoEvent)"

  • k-on-data-bound: Triggered when the dataset is databound. Ex. k-on-data-bound="vm.onDataBoundTreeView(kendoEvent)"

Accessing selected mode

The kendoEvent can be used to access the current active treenode

var node = kendoEvent.sender.dataItem(kendoEvent.sender.select());
In this section: