How can I extend the default TreeviewItem?

[andreElrico]

export interface MyTreeItem extends TreeItem {
    tooltip: string;
    context: string;
}

export class MyTreeviewItem extends TreeviewItem {
    
    tooltip: string;
    context: string;

    constructor(extItem: MyTreeItem) {
        super(extItem as unknown as TreeItem);
                
        if (extItem.tooltip) {
            this.tooltip = extItem.tooltip;
        }
        if (extItem.context) {
            this.context = extItem.context;
        }
    }    
}

I want to use MyTreeviewItem instead of TreeviewItem. The idea i want to have item.tooltip and item.context available in my ng-template overload.

I know I could work around this by defining value like for e.g:

value = {
   real_value: 'ID_1',
   tooltip: 'my tooltip text',
   context: 'super user context'
}

then use item.value.tooltip and item.value.context in ng-template.

Any ideas?

---

I think its at that point where my code fails:

https://github.com/leovo2708/ngx-treeview/blob/5afa879d2304344ec58c9d588209713fe28a31eb/src/lib/treeview-item.ts#L51

        if (!isNil(item.children) && item.children.length > 0) {
            this.children = item.children.map(child => {
                if (this.disabled === true) {
                    child.disabled = true;
                }

                return new TreeviewItem(child);
            });
        }

I would be nice to be able to overload the return value like

getModel(child) {
  return overwriteModel ? new overwriteModel(child) : new TreeviewItem(child)
}

then in the repo code we would return like so:

...
return getModel(child);
...

[rudyVL]

Hi andreElrico,

Wanted to do something similar and found a possible solution. If you look to the definition of the TreeViewItem, the value is specified as 'any' which means you can put an object in there that contains not only an Id but also your extra fields : {id: xx, tooltip: "", context: ""}. The onSelectChange() method will return the complete object, so you can access the tooltip/context.

Does that solve your problem ?

[jprabah]

hi rudyVL,

I am unable to add any custom key pair into the tree view item as u mentioned. Can u please give the complete json for my understanding

[dsuwirya-cloudwiz]

Seems because of this part below, all other item's fields not passed to the template. If we put the 'tooltip' within the 'value', then we can access it thru: [title]="item.value.tooltip"

https://github.com/leovo2708/ngx-treeview/blob/master/projects/ngx-treeview/src/lib/components/treeview/treeview.component.ts#L14-L21

constructor(item: TreeviewItem) { super({ text: item.text, value: item.value, disabled: item.disabled, checked: item.checked, collapsed: item.collapsed, children: item.children }); this.refItem = item; }

However, I'd like to see the [tootlip] option to be available by default, so we don't have to duplicate/extend the whole default template ( and style ) only because we need to add tooltip.