CirclonGroup / angular-tree-component

A simple yet powerful tree component for Angular (>=2)
https://angular2-tree.readme.io/docs
MIT License
1.1k stars 492 forks source link

Can we have multiple column for a node alongside the checkbox, for example; options: ITreeOptions = { displayField: 'name', moreDisplayField1: 'name1', moreDisplayField2: 'name2', idField: 'uuid', useCheckbox: true, }; #763

Closed debender495 closed 4 years ago

debender495 commented 5 years ago

PLEASE READ CAREFULLY!

Reproduce

Please reproduce here if reporting a bug, or requesting help: https://stackblitz.com/edit/angular-wxansn

Additional Info

Use the Slack Channel

The fastest way to get an answer is via the slack channel: https://angular-tree-component.herokuapp.com/

You will also get updates on releases, bugfixes and other announcements.

Search Docs First

Please look for an answer in the docs before submitting an issue: angular2-tree.readme.io.

tobiasengelhardt commented 4 years ago

Take a look at the documentation about the templates. You can have a custom template for the treeNode and in that build your columns. We are in the process of documenting this better.

Quick example on how it could look with the columns:

<tree-root [nodes]="nodes">
  <ng-template #treeNodeWrapperTemplate let-node let-index="index">
    <div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
      <tree-node-expander [node]="node"></tree-node-expander>
      <div class="node-content-wrapper"
        [class.node-content-wrapper-active]="node.isActive"
        [class.node-content-wrapper-focused]="node.isFocused"
        (click)="node.mouseAction('click', $event)"
        (dblclick)="node.mouseAction('dblClick', $event)"
        (contextmenu)="node.mouseAction('contextMenu', $event)"
        (treeDrop)="node.onDrop($event)"
        [treeAllowDrop]="node.allowDrop"
        [treeDrag]="node"
        [treeDragEnabled]="node.allowDrag()">

        <div class="tree-column-wrapper">
              <div class="tree-column" [title]="node.data.name">
                <span>{{ node.data.name }}</span>
              </div>
              <div
                *ngFor="let columnName of columns"
                class="tree-column"
                [title]="node.data[columnName]">
                <span>{{node.data[columnName]}}</span>
              </div>
         </div>
      </div>
    </div>
  </ng-template>
</tree-root>
tobiasengelhardt commented 4 years ago

Closing this issue due to inactivity. Please open a new issue if the problem still exists.