worktile / ngx-gantt

A modern and powerful gantt chart component for Angular
http://gantt.ngnice.com
MIT License
260 stars 74 forks source link

How to use links with a custom group template and the ngx-gantt-root component? #466

Open amorelliMooving opened 6 months ago

amorelliMooving commented 6 months ago

I am using the ngx-gantt-root component to create a Gantt chart with custom group templates. I want to implement links between tasks, but I am having trouble getting the links to display correctly when I select tasks.

`<ngx-gantt-root [sideWidth]="300" >

<ng-template #sideTemplate>
  <div class="gantt-flat-side-header">项目</div>
  <div class="gantt-flat-side-body">
    <div class="gantt-group" *ngFor="let group of groups; trackBy: trackBy">
      <div class="gantt-group-content" [style.height.px]="group.mergedItems?.length! * (styles.lineHeight + 10) - 10">
        {{ group.title }}
      </div>
    </div>
  </div>
</ng-template>

<ng-template #mainTemplate>
  <div class="gantt-main-container">

    <!-- groups -->
    <div class="gantt-main-groups" *ngIf="groups && groups.length > 0" [style.width.px]="view.width">
      <ng-container *ngFor="let group of groups; trackBy: trackBy">
        <div class="gantt-main-group" [style.height.px]="group.mergedItems?.length! * (styles.lineHeight + 10) - 10">

            <ng-container *ngFor="let items of group.mergedItems">
            <div class="gantt-flat-items" [style.height.px]="styles.lineHeight">
              <ng-container *ngFor="let item of items; trackBy: trackBy">
                <ngx-gantt-bar [item]="item" [template]="barTemplate" (barClick)="barClick.emit($event)"></ngx-gantt-bar>
              </ng-container>
            </div>
          </ng-container>
        </div>
      </ng-container>
    </div>
  </div>
</ng-template>

`

PRASANTHANTONY12 commented 3 weeks ago

need ts code