DxGantt Chart working only in Editor Dev Mode

[highsierra]

Hi there, folks! I’m having a very frustrating bug, my custom-coded component renders correctly only when I’m in dev mode. I tried to add a watcher to control the tasks list, did a forEach that goes through tasks and invokes instance.addTask for every task but still got this annoying bug.

Dev mode:

Editor:

There are no relevant warnings or errors in console.

My Code:

<template>
  <DxGantt
    scale-type="weeks"
    :width="800"
    :height="600"
    :task-list-width="200"
    @initialized="initialized"
  >
    <DxTasks :data-source="localTasks"></DxTasks>
    <DxEditing :enabled="false" />
  </DxGantt>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import "devexpress-gantt/dist/dx-gantt.min.css";
import { DxGantt, DxTasks, DxEditing } from "devextreme-vue/gantt";

export default {
  props: {
    content: { type: Object, required: true },
  },
  components: {
    DxGantt,
    DxTasks,
    DxEditing,
  },
  computed: {
    taskList() {
      return this.content.tasks;
    },
  },
  data() {
    return {
      localTasks: [],
      ganttInstance: {},
    };
  },
  watch: {
    "content.tasks": {
      deep: true,
      handler(tasks) {
        this.updateTasks(tasks);
        if (!!this.ganttInstance) {
          this.ganttInstance.refresh();
        }
      },
    },
  },
  methods: {
    initialized(event) {
      this.ganttInstance = event.component;
    },
    updateTasks(tasks) {
      this.localTasks = tasks;
    },
  },
};
</script>

<style scoped>
</style>

Thank you! Any help will be appreciated

[aurelie]

Can you try with static data and no watch, to see if the problem is the refreshing or the component itself?
There is normally no difference between the dev mode and the editor mode, except we prebuild the component (normally most difference come from editor vs published app).
There is no build error for your component when you import it?

Can you also link to your github test repo if possible (by pm if you want)?

[aurelie]

Also, i am not sure as i did not find anything about it on their doc, but storing third party instance inside something reactive is normally a bad idea (if not done to work with vue).
(this.ganttInstance)
This is because Vue proxy object for reactivity, which can break internal logic.

[highsierra]

Hello, thanks a lot for the prompt response

Project sample

I have tried to pass static data, but there was no difference in Gantt behavior. If you can have a look it will be highly appreciated, thank you!

[highsierra]

Sure, I had it as a ref, but I was testing a lot and tried this way of storing instance

[highsierra]

Hello

Were you able to recreate a problem on your project?

Thank you.

[aurelie]

I tried both locally and in production with the simple version, and everything worked great.
I tested both with static data and binding.

I think you must check your data.

• If you bind to a collection, you need a wrapper on the component to always have the data (collection are object with data and metadata). Using this method allow you to handle both normal array or collection.
  Exemple here on the kanban code

• When i took a look at the expected data, I see that it requires Date object, not Date string (to be double check). This is maybe your problem? (when fetching you probably receive string, and not Date object). Try with a simple binding (js) returning the example data of the doc.

Here is my code for reference (you will to add the wrapper i mention above to handle collection)

<template>
    <DxGantt scale-type="weeks" :width="800" :height="600" :task-list-width="200">
        <DxTasks :data-source="content.tasks"></DxTasks>
        <DxEditing :enabled="false" />
    </DxGantt>
</template>
<script>
import "devextreme/dist/css/dx.light.css";
import "devexpress-gantt/dist/dx-gantt.min.css";
import { DxGantt, DxTasks, DxEditing } from "devextreme-vue/gantt";

export default {
    props: {
        content: { type: Object, required: true },
    },
    components: {
        DxGantt,
        DxTasks,
        DxEditing,
    },
};
</script>

[highsierra]

Thank you for your response. I tried to do as you said, but I guess some project dependencies or something impacted production mode for me. Can we have a call to discuss possible solutions & check it together?

Thank you.

[Mael]

We are sorry, but we can’t schedule a call with our clients

Could you please create a ticket in our support app: WeWeb - Support

Please add the most detail as possible. All the information you have