Bryntum Gantt events in Vue

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

Listening to events

The following code demonstrates listening to the taskClick event:

Html:

<template>
    <div>
        <bryntum-gantt
            ref="gantt"
            @taskclick="onTaskClick"
        />
    </div>
</template>

<script>

import { BryntumGantt } from "@bryntum/gantt-vue";

export default {

    name: "Gantt App",

    components: { BryntumGantt },

    methods : {
        onTaskClick() {
            // Do something
        }
   }
}
</script>

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

Preventable events

By returning false from a listener for an event documented as preventable the action that would otherwise be executed after the event is prevented. These events names are usually prefixed with before.

For example:

<template>
    <div>
        <bryntum-gantt
            ref="gantt"
            @beforetaskedit="onBeforeTaskEdit"
        />
    </div>
</template>

<script>

import { BryntumGantt } from "@bryntum/gantt-vue";

export default {

    name: "Gantt App",

    components: { BryntumGantt },

    methods : {
        onBeforeTaskEdit() {
            if (someCondition) {
                return false;
            }
        }
   }
}
</script>