Our state of the art Gantt chart


Post by sachidanand »

Hello,

I have tree structure where parent don't have a column available but children are having it.
In such scenario data is not loaded even for the children.
Eg : In the test project I have attached, I have added a new column (Test Column), if I don't have field "testColumn" column available for the root node (Launch SaaS Product) then column value does not load even for the child node (Run tests).

Is there any way to load the column value for child node even when it is not available for the parent ?

Thank you.

Attachments
advanced (2).zip
(952.69 KiB) Downloaded 17 times
Last edited by sachidanand on Thu Oct 14, 2021 11:26 am, edited 1 time in total.

Post by mats »

You should defined fields in your task model:

import TaskModel from '../../../lib/Gantt/model/TaskModel.js';

// here you can extend our default Task class with your additional fields, methods and logic
export default class Task extends TaskModel {

static get fields() {
    return [
        'status' // For status column
    ];
}

}

then use this in your Project:

 project : {
        // Let the Project know we want to use our own Task model with custom fields / methods
        taskModelClass : Task,
        transport      : {
            load : {
                url : '../_datasets/launch-saas.json'
            }
        },
        autoLoad : true,

    // The State TrackingManager which the UndoRedo widget in the toolbar uses
    stm : {
        autoRecord : true
    },

    // This config enables response validation and dumping of found errors to the browser console.
    // It's meant to be used as a development stage helper only so please set it to false for production systems.
    validateResponse : true
},

Tired of debugging javascript errors in web applications? Try our powerful error logging service RootCause


Post by sachidanand »

Hello Mats,

In this case, how do we do the mapping of column and it's respective field, as column name and field name can be different ?
If possible could you please provide a test project with similar scenario ?


Post by Maxim Gorkovsky »

Hello.
Column uses this config to know which field to read from the model: https://bryntum.com/docs/gantt/api/Grid/column/Column#config-field
There're some examples at the top of the doc article


Post by sachidanand »

Hello Maxim,

Sorry, I forgot to add the attachment earlier.
The problem I am facing is that column data does not load when that key is not available for root node.
I have used the config-field as well.
Eg : In the test project I have attached, I have added a new column (Test Column), if I don't have field "testColumn" column available for the root node (Launch SaaS Product) then column value does not load even for the child node (Run tests).

Thank you.


Post by Maxim Gorkovsky »

I'm afraid you forgot to attachment again :)


Post by sachidanand »

Hey Maxim,

I have edited the the starting thread with the attachment.
Including it here as well now :)

Attachments
advanced (2).zip
(952.69 KiB) Downloaded 20 times

Post by Maxim Gorkovsky »

This application works correctly. In the data object you only set testColumn value to two records: Launch SaaS Product and Run Tests, and this is exactly what is rendered to the view. Parent value is not propagated to child records, when you read child value it doesn't bubble up to parent.
You should either set testColumn value on all records or use custom renderer function to read parent node value, smth like:

{
  text : 'Test column',
  renderer : ({ record }) => {
    let value = record.testColumn;
    while (record.parent && value == null) {
      record = record.parent;
      value = record.testColumn;
    }
    return value || 'Empty';
  }
}

Post by sachidanand »

Hi Maxim,

In case if I don't mention "TestColumn" for "Launch SaaS Product" but mention it for "Run Tests"
then it(Test column value) doesn't appear for "Run tests" either.

That's what I meant by "when a column is not available for root node then it's value doesn't appear for any of the children as well".

I have updated the test project, with testColumn no more available for Launch Saas Product but available for Run Tests, but UI does not display the column value for Run Tests now.

Is there any way to display the column value for children even if it is not available for parent ?

Attachments
advanced3.zip
(952.68 KiB) Downloaded 18 times

Post by saki »

What is actually happening here is that you "added" a field in json without letting the task model to know about it. The added field (testColumn) is not ignored and it can still be accessed through record data property but if you want a full support of the field, including its persistency (saving it to server) then you need to extend the TaskModel class. For that:

In lib/Task.js:

    static get fields() {
        return [
            { name : 'deadline', type : 'date' },
            { name : 'testColumn', type : 'string'},
        ];
    }

and in gantt.component.ts:

import Task from '../lib/Task.js';
@Component({
  selector: 'app-gantt',
  templateUrl: './gantt.component.html'
})
export class GanttComponent implements OnInit {
  ganttConfig = ganttConfig;
  public projectModel: ProjectModel = new ProjectModel(
    {
      autoLoad: false,
      validateResponse: false,
      taskModelClass: Task // <=== this line is important
    });

If you only want a quick show of a field from the server without the need of full support (without extending the TaskModel class) then you need a renderer on that column:

        {
            text: 'Test Column',
            field: 'testColumn',
            renderer: ({record}) => record.data.testColumn
        },

It is better to extend the TaskModel, though. In that case you do not need this renderer.


Post Reply