Premium support for our pure JavaScript UI components


Post by Vinodh Kumar »

Hi Team,

I have 2 columns status dropdown & percentage complete. When users change status the percentage should be updated.

The following way I implemented,

Status Dropdown data:
[
{ id: 1, status: "Not Started", value: 10 },
{ id: 2, status: "Started", value: 30 },
{ id: 3, status: "Preliminary", value: 45 },
{ id: 4, status: "Internal Review", value: 60 }
]

 gantt.on('finishCellEdit', ({ editorContext }) => {
      if (editorContext.column.field === 'status') {
        editorContext.record.data.percentDone = 45;
      }
  });

but is not refreshing the cell.


Post by pmiklashevich »

To get/set values you need to use corresponding getters and setters. To update the value please set to the record's property. Don't modify "data" object.

editorContext.record.percentDone = 45;

You can try in Basic demo in console:

gantt.taskStore.getById(11).percentDone = 10;

Pavlo Miklashevych
Sr. Frontend Developer


Post by pmiklashevich »

Though it's better to subscribe to store update event and update the percent done depending on new status field value.
https://www.bryntum.com/docs/gantt/#Gantt/data/TaskStore#event-update

Here is a small example you can apply to the Basic demo to see how it works.

/* eslint-disable no-unused-vars */
import '../_shared/shared.js'; // not required, our example styling etc.
import Gantt from '../../lib/Gantt/view/Gantt.js';
import ProjectModel from '../../lib/Gantt/model/ProjectModel.js';
import TaskModel from '../../lib/Gantt/model/TaskModel.js';
import Store from '../../lib/Core/data/Store.js';
import '../../lib/Gantt/column/PercentDoneColumn.js';

class MyTaskModel extends TaskModel {
    static get $name() {
        return 'MyTaskModel';
    }

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

const project = new ProjectModel({
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    },
    taskStore : {
        modelClass : MyTaskModel
    }
});

const statusStore = new Store({
    data : [
        { id : 1, status : 'Not Started', value : 10 },
        { id : 2, status : 'Started', value : 30 },
        { id : 3, status : 'Preliminary', value : 45 },
        { id : 4, status : 'Internal Review', value : 60 }
    ]
});

const gantt = new Gantt({
    appendTo : 'container',

project,

dependencyIdField : 'sequenceNumber',

columns : [
    { type : 'name', width : 250 },
    {
        field  : 'status',
        width  : 250,
        editor : {
            type         : 'combo',
            store        : statusStore,
            valueField   : 'id',
            displayField : 'status'
        },
        renderer({ record }) {
            return statusStore.getById(record.status)?.status || '';
        }
    },
    { type : 'percentdone', width : 250 }
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return taskRecord.name;
    }
}
});

project.load();

gantt.project.taskStore.on({
    update({ changes, record }) {
        if (changes.status) {
            record.percentDone = statusStore.getById(changes.status.value).value;
        }
    }
});

gantt.on({
    beforeCellEditStart({ editorContext }) {
        // Only leaf task's percent done can be updated. Summary tasks have their values calculated.
        if (editorContext.record.isParent) {
            return false;
        }
    }
});

Pavlo Miklashevych
Sr. Frontend Developer


Post by pmiklashevich »

Opened a ticket to support calculated fields: https://github.com/bryntum/support/issues/3070

Pavlo Miklashevych
Sr. Frontend Developer


Post by Vinodh Kumar »

Hi pmiklashevich,

While implementing the above code, I am facing the issue. It shows value does not exist in the model.

store-issues.png
store-issues.png (15.85 KiB) Viewed 1473 times

Post by saki »

This is a TypeScript only problem – we create records with value property (line 30) but we never declare it. It can be handled this way:

record.percentDone = (statusStore.getById(changes.status.value) as Model & {value : number}).value;

Post by Vinodh Kumar »

Thanks Saki It's working


Post Reply