Adding & Editing additional values to a branch

[NexPlex]

Hi,

Very nice code!! I'm editing your code in quickstart "treeview-overview.ts". I was able to add more than one value to the tree branch like below.

<span *ngIf="item!=editItem">{{item.text}} {{item.action}} {{item.script}}

I need to edit all three items in the treeview. I tried code like this but it does not work well.

<input *ngIf="item==editItem" type="text" [(ngModel)]="item.text"  [iuiFocus]="editorFocused" (focus)="selectContent($event)"  />
<input *ngIf="item==editItem" type="text" [(ngModel)]="item.action"  />
<input *ngIf="item==editItem" type="text" [(ngModel)]="item.script" (keydown)="editorKeyDown($event)" (blur)="editorLostFocus()" />

Any suggestion on what to replace this code with?

After I get the edit to work I need to add tree rows with all three fields. (and delete rows).

Thank you Chris

[Lidor-Systems]

We have just tried editing multiple values in single item, and it works. The template for the item looks like this: <span *ngIf="item!=editItem"> {{item.text}} {{item.action}} {{item.script}} </span> <span *ngIf="item==editItem"> <input type="text" [(ngModel)]="item.text" [iuiFocus]="editorFocused" (focus)="selectContent($event)" style="width:75px" /> <input type="text" [(ngModel)]="item.action" style="width:75px" /> <input type="text" [(ngModel)]="item.script" (keydown)="editorKeyDown($event)" (blur)="editorLostFocus()" style="width:75px" /> </span>

As you can see when editor is not active, the item content consists of three labels. When editor is active, a text box appears for each label. You can change the text, action and script fields of each item.

[Lidor-Systems]

After change the result is:

[NexPlex]

Thank you. with this code I can't seem to change the value in {item.text} . If I change "Desktop" to "MyDesktop". when I tab off the value is "Desktop". The other fields seem to work ok. How do I fix this?

on another topic: I'm using this code from one of your JSON example: this.treeview.loadData(data, item); How do I do the save or extract of data back to JSON?

[Lidor-Systems]

Based on current settings, you can see that the change is confirmed when user presses ENTER key but only from the last input box. To solve this, you can add a blur event for the first input box, and whenever focus is lost confirm the change.

In sample code, there is originalText field, probably in your case is not needed, or needs to be modified to include action and script fields.

In the moment there is no built-in method for exporting, it will be available in coming update next month. But, it is simple to do it, use this function:

` export(flat?: boolean): string { let data: Array = flat != false ? this.treeview.getFullList() : this.treeview.getList();

        let fieldList: Array<any> = ['id', 'pid', 'text'];
        if (!flat)
            fieldList.push('items');

        return JSON.stringify(data, fieldList, ' ');
    }

`

It exports the TreeView data in a flat list or tree hierarchy. Then you can save it and load it again later directly via loadData method.

As you can see from the code, you can choose which fields you want to export. You can add also custom fields.

[NexPlex]

Thank you for your quick reply. I successfully tested all your suggestions.!!