Editing

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTreeList } from '@oge-ui/tree-list';

@Component({
  selector: 'demo-root',
  imports: [OgeTreeList],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-tree-list
      [data]="org"
      keyExpr="id"
      parentIdExpr="parentId"
      [editing]="{
        mode: 'form',
        allowUpdating: true,
        allowAdding: true,
        allowDeleting: true,
        formColCount: 2,
        formItems: ['name', 'title', { field: 'office', colSpan: 2 }]
      }"
      (initNewRow)="$event.values['title'] = 'Engineer'"
    />
    <!-- treeList.addRow(parentKey) inserts under a chosen node -->
  `,
})
export class Demo {
  readonly org = [
    { id: 1, parentId: null, name: 'Aylin Koç', title: 'CEO', office: 'İstanbul', headcount: 4 },
    { id: 2, parentId: 1, name: 'Baran Ateş', title: 'VP Engineering', office: 'İstanbul', headcount: 2 },
    { id: 3, parentId: 2, name: 'Ceren Aksu', title: 'Team Lead', office: 'İzmir', headcount: 1 },
    { id: 4, parentId: 3, name: 'Deniz Ünal', title: 'Engineer', office: 'İzmir', headcount: 0 },
    { id: 5, parentId: 1, name: 'Elif Barış', title: 'VP Sales', office: 'Ankara', headcount: 0 },
  ];
}