This article showcases the integration of a ScheduleJS component into an external Ag-Grid table, to demonstrate the flexibility of ScheduleJS.
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:
<schedule-info-column-header-cell>in the timeline block to display every inner-column legend.
<ng-template>component of the Gantt graphics using the framework component
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.
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:
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 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:
We want the info column to be resizable. To do so, ScheduleJS proposes a handy Angular component called the
The resize handle configuration implemented here is the following:
resizeHandleAbsolutemeans it will use
position: absolutefor itself
resizeHandleDirection="right"means it will stand at the right of our component
[resizeHandleLinkedSizeChange]are the double Angular bindings allowing it to handle the initial and evolutive width.
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
<!-- 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>
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.