Using a custom info-column

The info-column part of the graphics is a key element of any ScheduleJS screen. The default info-column component provided by the framework can be easily replaced with any component. In this example, we’ll go through the implementation of an AG Grid info column.

December 21st, 2022 - 4 minutes read

What is the info-column?

Most of the time, what we call the info column is the left-most part of the screen where you find row-by-row information. Some graphics just don’t need an info column, while most of them do. The standard way of building an info column in ScheduleJS is done in two steps:

First, place the framework component <schedule-info-column-header-cell> in the timeline block to display every inner-column legend.
Then define a typical row inside the <ng-template> component of the Gantt graphics using the framework component <schedule-info-column-row-cell>.

When using these framework components you will be granted a set of features out of the box to resize and interact with the info column. But sometimes, you might prefer to build a more specific component or use one of the many Angular components that you can find on the market in place. This article describes how to integrate any Angular component as your custom info column.

The ScheduleJS component

Every application implementing ScheduleJS graphics has to build its ScheduleJS component. Most of the time, this component will be the entry point of the graphics and the info column.

Let’s take a look at this ScheduleJS component template:

<div class="demo-analytics-cumulative-graph-container">

  <!-- Info column -->

  <div class="demo-analytics-cumulative-graph-info-column"
       [style.width.px]="stateService.infoColumnWidth">

    <demo-analytics-cumulative-graph-info-column></demo-analytics-cumulative-graph-info-column>

    <resize-handle resizeHandleAbsolute
                   resizeHandleDirection="right"
                   [resizeHandleLinkedSize]="stateService.infoColumnWidth"
                   (resizeHandleLinkedSizeChange)="onInfoColumnWidthChange($event)">
    </resize-handle>

  </div>

  <!-- Gantt graphics -->

  <div class="demo-analytics-cumulative-graph-graphics-container">

    <default-schedule-gantt-graphic-tree class="demo-analytics-cumulative-graph-graphics"
                                         ganttNgDoCheckBoundingState="true"
                                         dragToResizeInfoColumnPrevented="true"
                                         [gantt]="gantt"
                                         [ganttContainerElement]="nativeElement"
                                         [rowInfoTemplate]="rowInfoTemplate"
                                         (rowExpandedChange)="gantt.refreshTreeRows()">
      <ng-template #rowInfoTemplate></ng-template>
    </default-schedule-gantt-graphic-tree>

    <!-- Timeline -->

    <div class="demo-analytics-cumulative-graph-timeline">
      <schedule-date-line [gantt]="stateService.analyticsGantt"></schedule-date-line>
    </div>

  </div>

</div>

If we go through this template, we will find a single container holding three items:

The Info-column <demo-analytics-cumulative-graph-info-column>
The Gantt graphics <default-schedule-gantt-graphic-tree>
The timeline <schedule-date-line>

Here, the info column is a custom component made with Angular that does not belong to ScheduleJS.

What’s interesting to notice is how the developer can build any view playing with modular components.

The info column block

The following code will display an info column block positioned in its parent container using CSS:

<!-- Info column -->

<div class="demo-analytics-cumulative-graph-info-column"
     [style.width.px]="stateService.infoColumnWidth">
  
  <demo-analytics-cumulative-graph-info-column></demo-analytics-cumulative-graph-info-column>
  
  <resize-handle resizeHandleAbsolute
                 resizeHandleDirection="right"
                 [resizeHandleLinkedSize]="stateService.infoColumnWidth"
                 (resizeHandleLinkedSizeChange)="onInfoColumnWidthChange($event)">
  </resize-handle>

</div>

This info column block is composed of two components:

The info column component using AG Grid.
A resize-handle, to let the user resize the info column/graphics horizontally.

The resize handle

We want the info column to be resizable. To do so, ScheduleJS proposes a handy Angular component called the <resize-handle>

The resize handle configuration implemented here is the following:

resizeHandleAbsolute means it will use position: absolute for itself
resizeHandleDirection="right" means it will stand at the right of our component
[resizeHandleLinkedSize] and [resizeHandleLinkedSizeChange] are the double Angular bindings allowing it to handle the initial and evolutive width.

The info column component

The info-column component will hold the HTML template and typescript controller for this specific info column. In this example, we want to implement a component from the AG Grid Angular framework, let’s take a look at the template of our <demo-analytics-cumulative-graph-info-column>

<!-- Let's use AG Grid! -->

<ag-grid-angular #agGrid
                 class="demo-analytics-cumulative-graph-info-column-container ag-theme-alpine"
                 [style.width.px]="infoColumnWidth"
                 [columnDefs]="columnDefs"
                 [defaultColDef]="defaultColDef"
                 [gridOptions]="gridOptions"
                 [components]="components"
                 [rowData]="rowData">
</ag-grid-angular>

Final result

Here we have an AG Grid component embedded in the ScheduleJS component in a modular way. You can also notice how positioning the <schedule-date-line> after the Gantt graphics component in the template puts it under the graph. Also, we decided that these graphics would not include the <schedule-event-line>, and by simply removing it from the template we can see the graphics and timeline components adapted.