AG Grid info column

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"


    <resize-handle resizeHandleAbsolute


  <!-- Gantt graphics -->

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

    <default-schedule-gantt-graphic-tree class="demo-analytics-cumulative-graph-graphics"
      <ng-template #rowInfoTemplate></ng-template>

    <!-- Timeline -->

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



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"
  <resize-handle resizeHandleAbsolute


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"

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.

More implementation-related articles

This article showcases the integration of a ScheduleJS component into an external Ag-Grid table, to demonstrate the flexibility of ScheduleJS.

How to synchronize multiple graphics? Learn how to reuse your ScheduleJS timeline in multiple graphics to keep them synchronized.

Contextual menu

How to build an interactive context menu? A deep dive into ScheduleJS event handling and recommended practice to build your own context menu.

This article shows how to implement dynamic rendering depending on the current zoom-level of the graphics.

This article proposes a step-by-step implementation of an animation mechanism using JavaScript Date API for your activities.

This article will cover a websocket implementation featuring real time data rendering using the ScheduleJS drawing engine.

This article will show you how the parent-child tree Gantt architecture within the ScheduleJS Viewer was built.

This article will showcase how the main activity renderer of the ScheduleJS Viewer was built with code examples.

ScheduleJS allows you to build complex drag-and-drop interactions, including side effects. This article shows how to implement drag-and-drop.

Notification pour
0 Commentaires
Show all comments
We would love to to have your toughts on this. Please leave a comment below!x