poc ag grid

Integrating ScheduleJS into AG-Grid

This article showcases the integration of ScheduleJS in an external third-party table component: the famous AG-Grid. The goal is to demonstrate the flexibility of ScheduleJS when integrated into a table component.

October 9th, 2023 - 3 minutes read

The integration use case

We have identified some cases where companies developing a scheduling component with ScheduleJS already use an in-house or a third-party-developed table. We decided to work on this proof of concept project to demonstrate a scenario where our users opt to leverage their actual solution and make their ScheduleJS application integrate seamlessly into their environment. The key to this approach is to be able to reuse the features a company spent time developing.

An advanced tree table implementation

In ScheduleJS, the tree table is a component often placed at the left of the graphics. Its role is to offer the end-user additional information on a given row and provide tools to interact with the data. ScheduleJS proposes a standard integrated tree table component in which you can customize the column headers and row cells to create the perfect layout for your end users. This standard info-column API aims to empower the developer with a simple yet powerful tool to cover most of the use cases a company can encounter in a scheduling application.

Can we reach the same usability while hosting the ScheduleJS graphics as a child to an external table component?

Example of an advanced AG-Grid table component

Integrating ScheduleJS as a sub-component

Graphics present complex data into a readable output so the user can quickly gather information and interact with a descriptive graphical view. It is common for a web application to use a table component at the core of its architecture.

AG-Grid has been identified by our developers as a good candidate for this exercise, as a consistent pool of companies use this component to develop their tables.

The following proof of concept couples the AG-Grid out-of-the-box features with the ScheduleJS graphics readability.

The result

For this implementation, we decided to pick the open-source version of the AG-Grid table component, which is royalty-free, even in the event of a commercial project.

The video below shows its features in our development environment:

The resulting additional features compared to a default tree table are the following:

  • The option to pin specific columns on the right-most and left-most parts of the ScheduleJS graphics
  • The option to modify the horizontal order of any column, including the ScheduleJS graphics
  • The ability to resize any column, including the ScheduleJS graphics
  • The ability to trigger the row expand and collapse features from the AG-Grid cell
  • The ability to use the AG-Grid integrated filter feature, affecting the ScheduleJS graphics

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 go through the implementation of a custom info column using an AG Grid component in place of the default one.

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