Rendering custom columns in Resource Grid

Gantt
#1

Hello, I’ve been pulling my hair out with this issue. I’m trying to implement the resource grid with custom columns but when I apply the resourceConfig variable to the gantt.config.layout attribute it changes the columns of both the main grid and the resourceGrid, I can’t seem to have them behave separately each grid with it’s own columns.

All the examples I saw on the API reference and documentation is pretty straight forward, but on my application it doesn’t seem to work. I even upgraded to the latest 6.1.6 version but still nothing.

I’m embedding the DHTMLX gantt in a VueJS application, might have something to do on how I’m instantiating it in the app, but I can’t seem to figure it out.

I added a console log to the event GanttReady to display both column settings and even though they are being set with different values, once the gantt Inits they are set to the same value…

— > console.log(gantt.config.columns, gantt.config.layout.rows[3].config.columns);
both configs always output the same value… Any ideas of what might be happening?

#2

Hi @PhilliesGomide!

Please send me the value of the gantt.config.layout and resourceConfig. So I’ll try to reproduce your issue. Or try to reproduce it yourself in the snippet, then click on the “share” button and send me the link.

https://snippet.dhtmlx.com/6f3939ac8

#3

Sorry for the late reply… took me a while to rebuild my gantt into the HTML snippet…

It must be something related to how VueJS is loading the gantt library, because when I replicate the configs and data sets in the HTML snippet I’m able to have the columns of the grid and resourceGrid to behave independently.

https://snippet.dhtmlx.com/47c824663

On my application, if I set the columns for the resourceGrid it also applies to the main grid, and the other way around…

#4

I tried to build the snippet in a similar way my VueJS application runs it by having all the settings in separate arrow functions that passes the gantt instance as well as my app properties in a context variable as parameters

var myGantt = Gantt.getGanttInstance();
setTemplates(context, myGantt);
setConfigs(context, myGantt);
enableColumnHighlight(context, myGantt);
setLayout(context, myGantt);
myGantt.init(“gantt_here”);
myGantt.parse();
parseResources(context, myGantt, resources);
setScaleConfig(context, myGantt);

#5

Hello Felipe,
I have a Vue.js demo project that has the resource chart:
https://files.dhtmlx.com/30d/67417f7c66fa765e4ca444b7428512ed/vue+resource_chart.zip
It doesn’t have the issue with the same columns in the Gantt grid and the resource grid:

If that doesn’t help you, please send me a Vue.js project where I can reproduce the issue locally. I will check what might be wrong.

#6

I had the exact same issue in my vue application.

I had a Gantt.getGanttInstance() stored in my component’s data which made vue modify the instance object in some way.

I solved it by creating a computed property that returns Gantt.getGanttInstance() like so:

// Before
new Vue({
  data: () => {
    return {
      gantt: Gantt.getGanttInstance()
    };
  }
});

// After
new Vue({
  data: () => {
    return {
    };
  },
  computed: {
    gantt: () => {
      return Gantt.getGanttInstance();
    }
  }
});
#7

Hi @Wurielle,

Thank you for sharing the solution!