Introduction

The left-most column in the GanttChart view is called the Info Column. By default it is used to display Row numbers and Row names. The Info Column can be shaped depending on your business needs, and is displayed using native HTML.

In this example info column, we are displaying 5 columns :

  • The Index column.
  • The Description column.
  • The Completion column.
  • The Start column.
  • The Finish column.

Components

The Info Column can display any information you need, if you want to build the above Info Column we would need the following components :

<!-- Component for building Header cell -->
<schedule-info-column-header-cell>
</schedule-info-column-header-cell>

<!-- Component for building Row cell -->
<schedule-info-column-row-cell>
</schedule-info-column-row-cell>

<!-- Component for adding a Resize handle -->
<resize-handle>
</resize-handle>


The <schedule-info-column-header-cell> is used to display the column titles, here: Index, Description, Complete %, Start, Finish.

The <schedule-info-column-row-cell> is used to display the row data, here Indexes, Tasks, Completion, Start date, Finish date.

The <resize-handle> is used to enable the header row to resize the whole info column.


An example implementation would be the following :

example.component.html
<div class="time-line-block">

  <!-- Describe the 5 info column headers -->

  <div class="info-column-headers-container">

    <!-- Index header -->

    <schedule-info-column-header-cell [scheduleInfoColumnCellsHost]="this"
                                      [columnIndex]="0">

      <div class="info-column-index-header"></div>

    </schedule-info-column-header-cell>

    <!-- Description header -->

    <schedule-info-column-header-cell [scheduleInfoColumnCellsHost]="this"
                                      [columnIndex]="1">

      <div class="info-column-description-header">
        Description
      </div>

    </schedule-info-column-header-cell>

    <!-- Completion header -->

    <schedule-info-column-header-cell [scheduleInfoColumnCellsHost]="this"
                                      [columnIndex]="2">

      <div class="info-column-completion-header">
        Complete %
      </div>

    </schedule-info-column-header-cell>

    <!-- Start date header -->

    <schedule-info-column-header-cell [scheduleInfoColumnCellsHost]="this"
                                      [columnIndex]="3">

      <div class="info-column-start-header">
        Start
      </div>

    </schedule-info-column-header-cell>

    <!-- End date header -->

    <schedule-info-column-header-cell [scheduleInfoColumnCellsHost]="this"
                                      [columnIndex]="4">

      <div class="info-column-finish-header">
        Finish
      </div>

    </schedule-info-column-header-cell>

    <!-- Handle to resize the whole GanttChart from the headers row -->

    <resize-handle resizeHandleDirection="right"
                   [(resizeHandleLinkedSize)]="defaultScheduleGanttGraphicTreeComponent.infoColumnWidth"
                   [resizeHandlePrevented]="defaultScheduleGanttGraphicTreeComponent.dragToResizeInfoColumnPrevented"
                   resizeHandleTransparent
                   resizeHandleNonTransparentOnActivated
                   resizeHandleAbsolute
                   preventDragContentToScroll>
    </resize-handle>

  </div>

  <div class="time-line">

    <schedule-date-line [gantt]="gantt"></schedule-date-line>

    <schedule-event-line [gantt]="gantt"></schedule-event-line>

  </div>

</div>

<!-- Gantt Graphics -->

<default-schedule-gantt-graphic-tree #defaultScheduleGanttGraphicTreeComponent
                                     class="gantt-graphic"
                                     [gantt]="gantt"
                                     [ganttContainerElement]="nativeElement"
                                     [dragToResizeInfoColumnPrevented]="dragToResizeInfoColumnPrevented"
                                     [rowInfoTemplate]="rowInfoTemplate"
                                     (rowExpandedChange)="refreshTreeRows()">

  <ng-template #rowInfoTemplate
               let-treeNodeContext="treeNodeContext"
               let-index="index">

    <ng-container *using="asTreeNodeContext(treeNodeContext) as treeNodeContext">

      <!-- Describe the 5 info column cells -->

      <div *using="treeNodeContext.value as row"
           class="info-column-cells-container">

        <!-- Index cell -->

        <schedule-info-column-row-cell [scheduleInfoColumnCellsHost]="this"
                                       [columnIndex]="0">

          <div class="info-column-cell-index">
            {{ index + 1 }}
          </div>

        </schedule-info-column-row-cell>

        <!-- Description cell -->

        <schedule-info-column-row-cell [scheduleInfoColumnCellsHost]="this"
                                       [columnIndex]="1">

          <div class="info-column-cell-description"
               [style.paddingLeft.px]="(treeNodeContext.level - 1) * 16 + 2"
               [class.leaf]="treeNodeContext.leaf"
               (click)="onClickOnDescriptionColumn(row)">

            <div class="info-column-cell-description-arrow"
                 [class.leaf]="treeNodeContext.leaf"
                 [class.expanded]="treeNodeContext.expanded">
              ▶
            </div>

            <div class="info-column-cell-description-tree">

              <svg *ngIf="isRowHasChildren(row)"
                   class="info-column-cell-description-tree-icon"
                   viewBox="0 0 24 24">
                <path fill="cadetblue"
                      d="M22,16A2,2 0 0,1 20,18H8C6.89,18 6,17.1 6,16V4C6,2.89 6.89,2 8,2H20A2,2 0 0,1 22,4V16M16,20V22H4A2,2 0 0,1 2,20V7H4V20H16M13,14L20,7L18.59,5.59L13,11.17L9.91,8.09L8.5,9.5L13,14Z"/>
              </svg>

              <svg *ngIf="!isRowHasChildren(row)"
                   class="info-column-cell-description-tree-icon"
                   viewBox="0 0 24 24">
                <path fill="coral"
                      d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"/>
              </sv>

              {{ row.getName() }}

            </div>

          </div>

        </schedule-info-column-row-cell>

        <!-- Completion cell -->

        <schedule-info-column-row-cell [scheduleInfoColumnCellsHost]="this"
                                       [columnIndex]="2">

          <div class="info-column-cell-percentage">
            {{ getPercentageComplete(row) }}
          </div>

        </schedule-info-column-row-cell>

        <!-- Start date cell -->

        <schedule-info-column-row-cell [scheduleInfoColumnCellsHost]="this"
                                       [columnIndex]="3">

          <div class="info-column-cell-task-start">
            {{ getTaskStartDate(row) }}
          </div>

        </schedule-info-column-row-cell>

        <!-- End date cell -->

        <schedule-info-column-row-cell [scheduleInfoColumnCellsHost]="this"
                                       [columnIndex]="4">

          <div class="info-column-cell-task-finish">
            {{ getTaskFinishDate(row) }}
          </div>

        </schedule-info-column-row-cell>

      </div>

    </ng-container>

  </ng-template>

</default-schedule-gantt-graphic-tree>

As you can see we are using the <schedule-info-column-header-cell> wrapper to describe headers cells, and the <schedule-info-column-row-cell> wrapper to describe row cells.

Schedule Info Columns

In addition to this, it is required to create the columns in the Typescript file.

The info column minimal information is the width we want to set for each column.

An example implementation would be :

example.component.ts
export class DemoProductionComponent extends DefaultScheduleTreeGanttComponentBase<Row, DefaultScheduleGanttGraphicTreeComponent<Row>> implements AfterViewInit {
  
  // ...

  readonly scheduleInfoColumns: ScheduleInfoColumn[] = [
    new ScheduleInfoColumn({width: 30}),              // Index column.
    new ScheduleInfoColumn({width: 300}),             // Description column.
    new ScheduleInfoColumn({width: 90}),              // Completion column.
    new ScheduleInfoColumn({width: 150}),             // Start date column.
    new ScheduleInfoColumn({width: 150})              // Finish date column.
  ];