v7.3.0
SupportExamplesFree Trial

Using Bryntum Gantt with Ionic

Bryntum npm repository access

Please refer to this guide for Bryntum npm repository access.

Ionic with Angular

The guide below references to using Ionic Framework for building application based on Angular.

Use Bryntum Gantt with Ionic

While Bryntum Gantt is designed to work with any framework, it ships with demos and wrappers to simplify integration with popular frameworks like Ionic.

This guide provides a basic introduction to using Bryntum Gantt with Ionic.

View online demos

Visit our online example browser to view demos of Bryntum Gantt with Ionic.

Build and run local demos

Download distribution zip with demos according to this guide.

Ionic demos are located in examples/frameworks/ionic folder inside distribution zip.

Each demo contains bundled README.md file in demo folder with build and run instructions.

To view and run an example locally in development mode, you can use the following commands:

npm install
npm run start

That starts a local server accessible at http://localhost:4200. If you modify the example code while running it locally it is automatically rebuilt and updated in the browser allowing you to see your changes immediately.

The production version of an example, or your application, is built by running:

npm install
npm run build

The built version is then located in dist sub-folder which contains the compiled code that can be deployed to your production server.

Install Ionic framework

Installation and API documentation can be found at the Ionic project's page https://ionicframework.com/.

Install the Ionic CLI globally with npm:

npm install -g ionic

The -g means it is a global install. For Windows it is recommended to open an Admin command prompt. For Mac/Linux, run the command with sudo.

Create Ionic app

Create an App:

ionic start IonicApp blank

blank is a common starter template for the app.

Run the App:

cd IonicApp
ionic serve

TypeScript and Typings

Bryntum bundles ship with typings for the classes for usage in TypeScript applications. You can find gantt*.d.ts files in the build folder inside the distribution zip package. The definitions also contain a special config type which can be passed to the class constructor.

The config specific types are also accepted by multiple other properties and functions, for example the Store.data config of the Store which accepts type ModelConfig[].

Sample code for tree store creation with ModelConfig and StoreConfig classes:

import { Store, StoreConfig, ModelConfig } from '@bryntum/gantt';

const storeConfig: StoreConfig = {
    tree : true,
    data : [
        {
            id       : 1,
            children : [
                {
                    id : 2
                }
            ] as ModelConfig[]
        }
    ] as ModelConfig[]
};

new Store(storeConfig);

Wrappers

The Ionic wrappers encapsulate Bryntum Gantt and other Bryntum widgets in Ionic components that expose configuration options, properties, features and events. The wrapped all Bryntum UI components so they can be used the usual Ionic way.

To use native API package classes with wrappers import them from @bryntum/gantt.

import { Gantt } from '@bryntum/gantt';

Installing the wrappers package

The wrappers are distributed as a separate package @bryntum/gantt-angular that is installed according to the used package manager. Please refer to this guide for Bryntum npm repository access.

Wrappers Overview

Wrappers are Ionic components which provide full access to Bryntum API widget class configs, properties, events and features. Each Wrapper has its own HTML tag which can be used in ionic templates. This is the list of available wrappers for Bryntum Gantt Ionic package:

Wrapper tag name API widget reference
<bryntum-a-i-filter-field/> AIFilterField
<bryntum-assignment-field/> AssignmentField
<bryntum-assignment-grid/> AssignmentGrid
<bryntum-assignment-picker/> AssignmentPicker
<bryntum-boolean-combo/> BooleanCombo
<bryntum-button/> Button
<bryntum-button-group/> ButtonGroup
<bryntum-calendar-editor/> CalendarEditor
<bryntum-calendar-field/> CalendarField
<bryntum-calendar-picker/> CalendarPicker
<bryntum-chat-panel/> ChatPanel
<bryntum-checkbox/> Checkbox
<bryntum-checkbox-group/> CheckboxGroup
<bryntum-checklist-filter-combo/> ChecklistFilterCombo
<bryntum-chip-view/> ChipView
<bryntum-code-editor/> CodeEditor
<bryntum-color-field/> ColorField
<bryntum-combo/> Combo
<bryntum-constraint-type-picker/> ConstraintTypePicker
<bryntum-container/> Container
<bryntum-cost-accrual-field/> CostAccrualField
<bryntum-date-field/> DateField
<bryntum-date-picker/> DatePicker
<bryntum-date-range-field/> DateRangeField
<bryntum-date-time-field/> DateTimeField
<bryntum-demo-code-editor/> DemoCodeEditor
<bryntum-dependency-field/> DependencyField
<bryntum-dependency-type-picker/> DependencyTypePicker
<bryntum-display-field/> DisplayField
<bryntum-duration-field/> DurationField
<bryntum-editor/> Editor
<bryntum-effort-field/> EffortField
<bryntum-end-date-field/> EndDateField
<bryntum-event-color-field/> EventColorField
<bryntum-field-filter-picker/> FieldFilterPicker
<bryntum-field-filter-picker-group/> FieldFilterPickerGroup
<bryntum-field-set/> FieldSet
<bryntum-file-field/> FileField
<bryntum-file-picker/> FilePicker
<bryntum-filter-field/> FilterField
<bryntum-gantt/> Gantt
<bryntum-gantt-base/> GanttBase
<bryntum-grid/> Grid
<bryntum-grid-base/> GridBase
<bryntum-grid-chart-designer/> GridChartDesigner
<bryntum-grid-field-filter-picker/> GridFieldFilterPicker
<bryntum-grid-field-filter-picker-group/> GridFieldFilterPickerGroup
<bryntum-group-bar/> GroupBar
<bryntum-hint/> Hint
<bryntum-label/> Label
<bryntum-list/> List
<bryntum-menu/> Menu
<bryntum-model-combo/> ModelCombo
<bryntum-month-picker/> MonthPicker
<bryntum-number-field/> NumberField
<bryntum-paging-toolbar/> PagingToolbar
<bryntum-panel/> Panel
<bryntum-password-field/> PasswordField
<bryntum-progress-bar/> ProgressBar
<bryntum-project-combo/> ProjectCombo
<bryntum-gantt-project-model/> ProjectModel
<bryntum-radio/> Radio
<bryntum-radio-group/> RadioGroup
<bryntum-rate-table-field/> RateTableField
<bryntum-resource-combo/> ResourceCombo
<bryntum-resource-editor/> ResourceEditor
<bryntum-resource-filter/> ResourceFilter
<bryntum-resource-grid/> ResourceGrid
<bryntum-resource-histogram/> ResourceHistogram
<bryntum-resource-type-field/> ResourceTypeField
<bryntum-resource-utilization/> ResourceUtilization
<bryntum-scheduler/> Scheduler
<bryntum-scheduler-base/> SchedulerBase
<bryntum-scheduler-date-picker/> SchedulerDatePicker
<bryntum-scheduler-pro/> SchedulerPro
<bryntum-scheduler-pro-base/> SchedulerProBase
<bryntum-scheduling-direction-picker/> SchedulingDirectionPicker
<bryntum-scheduling-mode-picker/> SchedulingModePicker
<bryntum-slider/> Slider
<bryntum-slide-toggle/> SlideToggle
<bryntum-splitter/> Splitter
<bryntum-start-date-field/> StartDateField
<bryntum-tab-panel/> TabPanel
<bryntum-text-area-field/> TextAreaField
<bryntum-text-area-picker-field/> TextAreaPickerField
<bryntum-text-field/> TextField
<bryntum-time-field/> TimeField
<bryntum-timeline/> Timeline
<bryntum-timeline-histogram/> TimelineHistogram
<bryntum-time-picker/> TimePicker
<bryntum-time-zoom-slider/> TimeZoomSlider
<bryntum-toolbar/> Toolbar
<bryntum-tree-combo/> TreeCombo
<bryntum-tree-grid/> TreeGrid
<bryntum-undo-redo/> UndoRedo
<bryntum-version-grid/> VersionGrid
<bryntum-view-preset-combo/> ViewPresetCombo
<bryntum-widget/> Widget
<bryntum-year-picker/> YearPicker

Import BryntumGanttModule

Add the following code to your app.module.ts:

import { BryntumGanttModule } from '@bryntum/gantt-angular'

@NgModule({
    imports : [
        BryntumGanttModule
    ]
})

Then you will be able to use the custom tag like <bryntum-gantt> and others listed above the same way as you use your application components. Our examples are built this way so you can refer to them to see how to use the tag and how to pass parameters.

Using the wrapper in your application

Now you can use the component defined in the wrapper in your application:

<bryntum-gantt
    #gantt
    tooltip="My cool Bryntum Gantt component" ,
    (onCatchAll)="onGanttEvents($event)"
// other configs, properties, events or features
></bryntum-gantt>

You will also need to import CSS files for Bryntum Gantt. We recommend to do it in src/styles.scss:

// FontAwesome is used for icons
@import "~@bryntum/gantt/fontawesome/css/fontawesome.css";
@import "~@bryntum/gantt/fontawesome/css/solid.css";
// Structural CSS
@import "@bryntum/gantt/gantt.css";
// Bryntum theme of your choice
@import "@bryntum/gantt/svalbard-light.css";

// other application-global styling

Embedding widgets inside wrapper

Wrappers are designed to allow using Bryntum widgets as Angular components, but they themselves cannot contain other Bryntum wrappers inside their tag. To embed Bryntum widgets inside a wrapper you should instead use the available configuration options for the wrapper's widget. Please note that not all widgets may contain inner widgets, please refer to the API docs to check for valid configuration options.

This example shows how to use a Toolbar widget inside the wrapper for Bryntum Gantt:

Sample code for app.component.ts:

export class AppComponent {

    // Toolbar (tbar) config
    tbarConfig = {
        items : {
            myButton : {
                type : 'button',
                text : 'My button'
            }
        }
    }

}

Sample code for app.component.html:

<bryntum-gantt
    #gantt
    tbar="tbarConfig",
></bryntum-gantt>

Configs, properties and events

All Bryntum Ionic Wrappers support the full set of the public configs, properties and events of a component.

Listening to Bryntum Gantt events

The Bryntum Gantt events are passed up to the Angular wrapper which makes it possible to listen to them the standard Angular way.

The following code demonstrates listening to the taskClick event:

Sample code for app.component.ts:

export class AppComponent implements AfterViewInit {

    onGanttTaskClick(e : {[key:string] : any}) : void {
        console.log('onTaskClick', e);
    }
    // etc.

Sample code for app.component.html:

<bryntum-gantt
    #gantt
    (onTaskClick) = "onGanttTaskClick($event)"

Please note that we prefix the capitalized event name with the on keyword and that we pass $event as the argument to the listener.

Another valid method is to pass a listeners config object to the Angular wrapper. For example:

Sample code for app.config.ts:

export const ganttProps = {
    listeners : {
        taskClick(e) {
            console.log('taskClick', e);
        }
    },
    // etc

and app.component.html:

<bryntum-gantt
    #gantt
    [listeners] = "ganttProps.listeners!"

Please note that we use unprefixed event names in this case.

Using dataChange event to synchronize data

Bryntum Gantt keeps all data in its stores which are automatically synchronized with the UI and the user actions. Nevertheless, it is sometimes necessary for the rest of the application to be informed about data changes. For that it is easiest to use dataChange event.

app.component.html:

<bryntum-gantt
    #gantt
    (onDataChange) = "syncData($event)"

app.component.ts:

export class AppComponent {

    syncData({ store, action, records } : { store : Store; action : String; records : Model[]}) : void {
        console.log(`${store.id} changed. The action was: ${action}. Changed records: `, records);
        // Your sync data logic comes here
    }

    // ...
}

Features

Features are suffixed with Feature and act as both configs and properties for BryntumGanttComponent. They are mapped to the corresponding API features of the Bryntum Gantt instance.

This is a list of all BryntumGanttComponent features:

Wrapper feature name API feature reference
aiFeature AI
aiFilterFeature AIFilter
baselinesFeature Baselines
cellCopyPasteFeature CellCopyPaste
cellEditFeature CellEdit
cellMenuFeature CellMenu
cellTooltipFeature CellTooltip
chartsFeature Charts
columnAutoWidthFeature ColumnAutoWidth
columnDragToolbarFeature ColumnDragToolbar
columnLinesFeature ColumnLines
columnPickerFeature ColumnPicker
columnRenameFeature ColumnRename
columnReorderFeature ColumnReorder
columnResizeFeature ColumnResize
criticalPathsFeature CriticalPaths
dependenciesFeature Dependencies
dependencyEditFeature DependencyEdit
eventFilterFeature EventFilter
eventSegmentsFeature EventSegments
excelExporterFeature ExcelExporter
fileDropFeature FileDrop
fillHandleFeature FillHandle
filterFeature Filter
filterBarFeature FilterBar
groupFeature Group
groupSummaryFeature GroupSummary
headerMenuFeature HeaderMenu
headerZoomFeature HeaderZoom
indicatorsFeature Indicators
labelsFeature Labels
lockRowsFeature LockRows
mergeCellsFeature MergeCells
mspExportFeature MspExport
nonWorkingTimeFeature NonWorkingTime
panFeature Pan
parentAreaFeature ParentArea
pdfExportFeature PdfExport
percentBarFeature PercentBar
pinColumnsFeature PinColumns
printFeature Print
progressLineFeature ProgressLine
projectEditFeature ProjectEdit
projectLinesFeature ProjectLines
quickFindFeature QuickFind
regionResizeFeature RegionResize
rollupsFeature Rollups
rowCopyPasteFeature RowCopyPaste
rowEditFeature RowEdit
rowExpanderFeature RowExpander
rowReorderFeature RowReorder
rowResizeFeature RowResize
scheduleMenuFeature ScheduleMenu
scheduleTooltipFeature ScheduleTooltip
scrollButtonsFeature ScrollButtons
searchFeature Search
sortFeature Sort
splitFeature Split
stickyCellsFeature StickyCells
stripeFeature Stripe
summaryFeature Summary
taskCopyPasteFeature TaskCopyPaste
taskDragFeature TaskDrag
taskDragCreateFeature TaskDragCreate
taskEditFeature TaskEdit
taskMenuFeature TaskMenu
taskNonWorkingTimeFeature TaskNonWorkingTime
taskResizeFeature TaskResize
taskSegmentDragFeature TaskSegmentDrag
taskSegmentResizeFeature TaskSegmentResize
taskTooltipFeature TaskTooltip
timeAxisHeaderMenuFeature TimeAxisHeaderMenu
timelineChartFeature TimelineChart
timeRangesFeature TimeRanges
timeSpanHighlightFeature TimeSpanHighlight
treeFeature Tree
treeGroupFeature TreeGroup
versionsFeature Versions

Configuring features

Most features are enabled by default, in which case you can disable them like this:

const ganttProps = {
    // other config
   columnLinesFeature : false
};

Others require you to enable them:

const ganttProps = {
    // other config
    labelsFeature      : {
        before : {
            field  : 'name',
            editor : {
                type : 'textfield'
            }
        }
    }
};

To learn more about configuration, visit the feature page from the API Feature reference table above.

Bryntum Gantt API instance

It is important to know that the Ionic BryntumGanttComponent is not the native Bryntum Gantt instance, it is a wrapper or an interface between the Ionic application and the Bryntum Gantt itself.

All available configs, properties and features are propagated from the wrapper down to the underlying Bryntum Gantt instance, but there might be the situations when you want to access the Bryntum Gantt directly. That is fully valid approach and you are free to do it.

Accessing the Bryntum Gantt instance

If you need to access Bryntum Gantt functionality not exposed by the wrapper, you can access the Bryntum Gantt instance directly. Within the wrapper it is available under the instance property.

This simple example shows how you could use it:

app.component.html

<ion-header>
...
</ion-header>

<ion-content>
    <gantt
        #gantt
        tooltip = "My cool Bryntum Gantt component"
    ></gantt>
</ion-content>

Sample code for app.component.ts:

import { BryntumGanttComponent } from '@bryntum/gantt-angular';
import { Gantt } from '@bryntum/gantt';

export class AppComponent implements AfterViewInit {

    @ViewChild(BryntumGanttComponent, { static : false }) ganttComponent: BryntumGanttComponent;

    private gantt : Gantt;

    @ViewChild(BryntumGanttComponent, { static : false }) ganttComponent: BryntumGanttComponent;

    ngAfterViewInit(): void {
        // store Bryntum Gantt isntance
        this.gantt = this.ganttComponent.instance;
    }
}

When accessing instance directly, use wrapper's API widget reference docs from the list above to get available configs and properties.

Troubleshooting

Please refer to this Troubleshooting guide.

References

Contents