Bryntum Support Forums

Posted: **Thu Sep 22, 2022 4:22 pm**

Hi,

There seems to be a bug that causes the whole page to freeze.

I attached the code that causes it. To reproduce it run npm install then npm run dev. The app should be just the Bryntum gantt with a single task, if you move the task the page freezes.

I have found that it's caused by calling the ProjectModel instead of just the configuration. Inside the GanttEditor.vue file there is the following:

data() {
    return {
        project: new ProjectModel({
            tasks: [
                {
                    id: 1,
                    startDate: new Date(),
                    duration: 7,
                    durationUnit: "day",
                    name: "Design",
                }
            ]
        })
    }
}

If that is instead changed to this, then it seems to work:

data() {
    return {
        project: {
            tasks: [
                {
                    id: 1,
                    startDate: new Date(),
                    duration: 7,
                    durationUnit: "day",
                    name: "Design",
                }
            ]
        }
    }
}

It also seems to work fine if the gantt is placed in the App.vue file instead of the GanttEditor.vue file.

I tried this with version 5.1.3, and I also tried this with the new alpha version, 5.2.0-alpha-1, and it still seems to be happening.

Is there a workaround for this? I want to be able to use the ProjectModel syntax instead of the configuration object because I want to be able to extend from ProjectModel.

Thanks

Posted: **Thu Sep 22, 2022 5:15 pm**

Please check this guide how to import ProjectModel class https://bryntum.com/docs/gantt/guide/Gantt/integration/vue/data-binding#binding-existing-data-to-the-project
You can import your extended ProjectModel:

<template>
    <div>
        <bryntum-project-model
            ref = "project"
            :assignments = "assignments"
            :calendars = "calendars"
            :dependencies = "dependencies"
            :resources = "resources"
            :tasks = "tasks"
        />
        <bryntum-gantt
            :project = "project"
            v-bind = "ganttConfig"
        />
    </div>
</template>

<script>
import { ref, reactive } from 'vue';

// here you will need to specify your sources for ProjectModel.
import { BryntumProjectModel, BryntumGantt } from '@bryntum/gantt-vue-3';

import { useGanttConfig } from '@/AppConfig';
import * as appData from '@/AppData';

export default {
    name : 'App',

components : {
    BryntumProjectModel,
    BryntumGantt
},

setup() {
    const project = ref(null);

    const ganttConfig = reactive(useGanttConfig());

    const assignments = ref(appData.assignments);
    const calendars = ref(appData.calendars);
    const dependencies = ref(appData.dependencies);
    const resources = ref(appData.resources);
    const tasks = ref(appData.tasks);

    return {
        project,
        ganttConfig,
        assignments,
        dependencies,
        calendars,
        tasks,
        resources
    };
}
};
</script>

<style lang = "scss">
@import './App.scss';
</style>

Posted: **Thu Sep 22, 2022 6:33 pm**

Okay, but if I want to extend from the default ProjectModel, how do I do that using this method.

For example, if I have a class like this:

class MyProjectModel extends ProjectModel {

    static get fields() {
        return [
            { name: "name", type: "string" },
            { name: "created", type: "string" },
            { name: "createdBy", type: "object" }
        ]
    }


    static get configurable() {
        return {
            stm : {
                autoRecord : true
            },
        }
    }
}

Also in the future I might want to override some of the methods as well.

Is there any way of using this class as the project model or is that not supported?

Thanks

Posted: **Fri Sep 23, 2022 9:37 am**

Hi dominicdolan,

I checked it deeper and have better option for you.

In BryntumProjectModel we have this code

    function createWidget(context) {
        const
            { instanceClass } = context.data,
            config            = createConfig(context);
        return instanceClass.$name === 'Widget' ? WidgetHelper.createWidget(config) : new instanceClass(config);
    }

So the easiest way to not extend React wrapper but only ProjectModel class.
Try this:

<template>
    <div>
        <bryntum-project-model
            ref = "project"
            :instanceClass=MyProjectModel
        />
        <bryntum-gantt
            :project = "project"
            v-bind = "ganttConfig"
        />
    </div>
</template>

Posted: **Fri Sep 23, 2022 5:43 pm**

This isn't working for me. The instanceClass property is part of the data attribute inside BryntumProjectModel component, I can only change the props of that component.

I tried doing this as well, but it caused errors. I assume I'm not supposed to be extending Bryntum components

<template>
    
</template>

<script>
import {BryntumProjectModel} from "@bryntum/gantt-vue-3"
import {MyProjectModel} from "@/my-project-model";
export default {
    extends: BryntumProjectModel,
    data() {
        return {
            instanceClass: MyProjectModel
        }
    }
}
</script>

<style scoped>

</style>

Posted: **Fri Sep 23, 2022 5:57 pm**

Hi,

I think I found a workaround for this
I found that instead of the above, this works:

import { BryntumProjectModel } from "@bryntum/gantt-vue-3"
import {MyProjectModel} from "../my-project-model";

export default {
    ...BryntumProjectModel,
    data() {
        return {
            ...BryntumProjectModel.data(),
            instanceClass: MyProjectModel
        }
    }
}

And then use that as a component instead of the BryntumProjectModel component

Bryntum Support Forums

[VUE] [VITE] The Gantt chart freezes when the ProjectModel is assigned as an instance

[VUE] [VITE] The Gantt chart freezes when the ProjectModel is assigned as an instance

Re: [VUE] [VITE] The Gantt chart freezes when the ProjectModel is assigned as an instance

Re: [VUE] [VITE] The Gantt chart freezes when the ProjectModel is assigned as an instance

Re: [VUE] [VITE] The Gantt chart freezes when the ProjectModel is assigned as an instance

Re: [VUE] [VITE] The Gantt chart freezes when the ProjectModel is assigned as an instance

Re: [VUE] [VITE] The Gantt chart freezes when the ProjectModel is assigned as an instance