quickInfo Extension

Read details about the quickInfo extension in the Quick Info (Touch Support) article.

The quickInfo object possesses the following API:

Methods

show (id): void - displays the quick info popup for a specified element
- id - (number | string) - the task ID

gantt.ext.quickInfo.show("1");

show (x, y): void - displays the quick info popup at specific coordinates
- x - (number | string) - horizontal coordinate
- y - (number | string) - vertical coordinate

gantt.ext.quickInfo.show(10,30);

hide (force): HTMLElement - hides the quick info popup. When gantt.config.quick_info_detached is set to false, the quick info will not disappear immediately, but after a short animation. Providing true value as an argument will cancel the animation and will remove the popup immediately.
- force? - (boolean) - defines whether the quick info popup will be hidden immediately without animation

gantt.config.quick_info_detached = false;
gantt.init("gantt_here");
 
// hide the popup after a short animation
gantt.ext.quickInfo.hide();
 
// hide the popup immediately
gantt.ext.quickInfo.hide(true);

setContainer (container): void - sets a container where the quick info will be displayed. If no custom container specified, QuickInfo will be placed into the first of the found nodes: gantt.$task, gantt.$grid, gantt.$root
- container - (HTMLElement | string) - container element or its ID

gantt.ext.quickInfo.setContainer(document.body);
gantt.ext.quickInfo.show(1300,100);

getNode (): HTMLElement | null - returns the HTMLElement of the quick info popup. Returns null if the quick info is not initialized

const node = gantt.ext.quickInfo.getNode();

The returned DOM element of the shown quick info looks like:

setContent (config): void - puts the content into the quick info
- config? - (object) - optional, the configuration object of a quick info which can include the following attributes:
  - taskId? - (string | number) - optional, the id of the task to which the action buttons of the quick info will be connected
  - header? - (object) - optional, the header of the pop-up edit form which may include:
    - title? - (string) - optional, the title of the pop-up edit form
    - date? - (string) - optional, the date of the pop-up edit form
  - content? - (string) - optional, the content of the pop-up edit form
  - buttons? - (string[]) - optional, buttons to be placed in the pop-up edit form

If neither header nor buttons are specified, the related areas of the quick info popup will be hidden.

Here is what the configuration object of the setContent method can look like:

const quickInfo = gantt.ext.quickInfo;
var task = gantt.getTask(10);
quickInfo.show(task.id);
quickInfo.setContent({
    taskId: task.id,
    header: {
        title: gantt.templates.quick_info_title(task.start_date, task.end_date, task),
        date: gantt.templates.quick_info_date(task.start_date, task.end_date, task)
    },
    content: gantt.templates.quick_info_content(task.start_date, task.end_date, task),
    buttons: gantt.config.quickinfo_buttons
});

You can create a custom pop-up without a header and buttons:

const quickInfo = gantt.ext.quickInfo;
quickInfo.show(100, 100);
quickInfo.setContent({
    content: "my custom html",
    buttons: []
});

Methods​

Methods