Config: resourceConfig overwrites the style of this.gantt.config.columns = this.tasks.columns


#1

when i use the Pro version, i want to make a resource chart
but the config: resourceConfig doesn’t work . config: resourceConfig overwrites the style of this.gantt.config.columns = this.tasks.columns。
It uses the same column style for both.
I wrote it according to the example on the official website, but I still can’t get it out。How to implement it correctly?
7.0.13 Pro version

Blockquote
tasks: {
data: [],
links: [],
columns: [
{
name: ‘sort’,
label: ‘Sort’,
min_width: 66,
template: function (obj) {
console.log(obj)
if (obj.parent === 0) {
return (’’ + obj.sort + ‘’)
}
}
},
{ name: ‘car’, label: ‘Car’, tree: true, width: ‘*’, min_width: 150 },
{ name: ‘project_name’, label: ‘Name’, align: ‘center’ },
{ name: ‘duration’, label: ‘Duration’, align: ‘center’ },
{ name: ‘start_date’, label: ‘Start’, align: ‘center’, min_width: 150 },
{ name: ‘end_date’, label: ‘End’, align: ‘center’, min_width: 150 },
],
// 底部关联table数据
resource:{
columns:[
{
name: “name”, label: “Name1”, tree:true, template: function (resource) {
console.log(resource)
return resource.text;
}
},
],
resource_data:[
{id: 1, text:‘first’,parent:null},
{id: 2, text:‘decond’,parent:null},
]
}

Blockquote
this.gantt.config.columns = this.tasks.columns

      this.gantt.templates.resource_cell_value = function (start_date, end_date, resource, tasks) {
        console.log(tasks);
        return "<div>" + tasks.length * 8 + "</div>";
      }
        this.gantt.config.resource_store = "resource"
      this.gantt.config.resource_property = "owner_id"
      this.gantt.config.order_branch = true

      let resourceConfig={
        columns:this.tasks.resource.columns
      } 
      this.gantt.config.layout = {
        css: "gantt_container",
        rows: [
          {
            cols: [
              {view: "grid", scrollable: true,group:"grids",scrollY: "scrollVer",gravity:1},
              {resizer: true, width: 1},
              {view: "timeline",gravity:3, scrollX: "scrollHor", scrollY: "scrollVer"},
              {view: "scrollbar", id: "scrollVer", group:"vertical"}
            ],
            gravity:2
          },
          {resizer: true, width: 1},
          {
            
            cols: [
              {view: "resourceGrid",config: resourceConfig, group:"grids",scrollY: "resourceVScroll" },
              {resizer: true, width: 1},
              {view: "resourceTimeline", gravity:3,scrollX: "scrollHor", scrollY: "resourceVScroll"},
              {view: "scrollbar", id: "resourceVScroll", group:"vertical"}
            ],
            gravity:1
          },
          {view: "scrollbar", id: "scrollHor"}
        ]
      }

Blockquote
this.gantt.init(this.$refs.gantt)
this.gantt.parse(this.$props.tasks)
if(this.tasks.resource){
var resourcesStore = this.gantt.createDatastore({
name: _this.gantt.config.resource_store,
type: “treeDatastore”,
initItem: function (item) {
console.log(item)
item.parent = item.parent || _this.gantt.config.root_id;
item[_this.gantt.config.resource_property] = item.parent;
// item.open = true;
console.log(item)
return item;
}
});
this.resourcesStore = resourcesStore
resourcesStore.parse(this.tasks.resource.resource_data)
}

The display effect is


#2

Hello Qian,
I added your configuration to the sample, but I couldn’t reproduce the issue:
http://snippet.dhtmlx.com/5/971d149ee

Probably, it is related to the Gantt configuration, but it is hard to suggest what might be wrong as I don’t see your code.
Please, add your configuration in the following snippet and make sure that the issue is reproduced there:
https://snippet.dhtmlx.com/38ee1b370
Then, click on the Share button and send me the link.
Or send me a ready demo with all the necessary Javascript and CSS files so that I can reproduce the issue locally.


#3

I wrote an example using our company’s Pro version and put it on github. Please read the readme.md first.
Can you download it and run it?


#4

Hello Qian,
Thank you for sending the demo. I was able to reproduce the issue.
It seems that at some point the config property is removed from the resource grid, so Gantt obtains the main grid config object and continues using it.
That issue occurs only if Gantt is attached to the this object. As soon as I detach Gantt from this and make it a separate variable, everything works correctly. You can test how it works if you use the following file:
https://files.dhtmlx.com/30d/df4ceec7893c2f9c4616b95c8439ac36/Gantt.vue

I will inform the dev team about that issue.


#5

Hi Qian,

the issue seems to only happen when gantt.config contains reactive objects. In your app it happens when you pass columns config from the page to the gantt component, vuejs wraps the config into its own objects. Turns out our implementation of nested configs didn’t work correctly when properties of config had getters and setters.

We did some changes and all seems working correctly in the latest dev build,
I’ve sent you a PM with the download link, can you please check?

If it works well on your end, you can just use the build I’ve sent until we publish a bugfix (probably later this week)


#8

Thank you very much for your help, I also use it as you said “detach Gantt from this and make it a separate variable, everything works correctly.”.
Otherwise it can’t be displayed normally


#9

Thank you for your help. I saw the link you sent me. I’ll download it and try it.


#10

I used the version you sent me, and now it displays normally, thank you very much