Our state of the art Gantt chart


Post by hien.nguyen »

Sorry again,

I've error

taskRecord is null

I tried to log

gantt.selectedRecord

and it's null

Best regards.


Post by alex.l »

Maybe because you didn't select a record?
Please attach a runnable test case, it will save your time a lot if I will be able to debug it in your real applicaion.

All the best,
Alex


Post by hien.nguyen »

Yes,

If I select task by double click on task => result is have task record.

But If I select on button "Edit" or menu "Edit" from context menu (right click) => result is null.

Attachments
1.png
1.png (66.33 KiB) Viewed 161 times

Best regards.


Post by alex.l »

This means task has not been selected in selection model. You clicked on React component, so it's different case than select task in a grid.
Please provide your runnable application and describe what are you trying to achieve.
In case you clicked on a button, you can catch a record by another event and have it in some variable that you will check later. The logic that you are trying to implement is not supported out of the box and not as trivial as might think in the beginning, you need to learn docs to figure out all cases you need to cover with this functionality.
Check CellEdit feature and its events https://bryntum.com/docs/gantt/api/Gantt/feature/CellEdit#events

All the best,
Alex


Post by hien.nguyen »

Thanks,

Please check my runnable source-code in attachment: this is just a demo code from /gantt-5.1.5/examples/frameworks/react/javascript/basic. I just add new code for catch events: beforeSync and sync on file App.js

useEffect(() => {
        const gantt = ganttComponent.current.instance;
        gantt.project.on('beforeSync', ({ pack }) => {

        //Change task's color
        console.log(gantt.selectedRecord);
        const taskDom = gantt.getElementFromTaskRecord(gantt.selectedRecord);
        taskDom.classList.add('gray-color');
     });
     gantt.project.on('sync', ({ response }) => {
         //Reset color
         const taskDom =
         gantt.getElementFromTaskRecord(gantt.selectedRecord);
         taskDom.classList.remove('gray-color');
    });
}, []);

My purpose: when select task from Grid, click Edit button on React or select Edit menu from context menu (by right click), I want to change this task color on before sync and after finish sync, I want back to normal color.

Best regards.

Attachments
basic.zip
(2.36 MiB) Downloaded 18 times

Best regards.


Post by tasnim »

Hi,
I've tested your source code and seems like it works after sync and before sync. Do you want something like this
When the task edit popup opens you want to change the task color and when it closes you want to back to the normal color.


Post by hien.nguyen »

Hi,

Yes, it works after sync and before sync for case select task from Grid (double click on Task and edit).

But it not work when click on button "Edit" (react part), please see my screenshot in attachment.

Thanks.

Attachments
1.png
1.png (46.06 KiB) Viewed 146 times

Best regards.


Post by tasnim »

Please replace the handleEditClick function with the provided function below

    const handleEditClick = ({ record, grid : gantt }) => {
        // check if the record is available in selectedRecords
        const isSelectedItem = gantt.selectedRecords.find(task => task.id === record.id);
        // if selectedRecords doesn't contain record
        if (!isSelectedItem) {
            // add the record to selectedRecords
            gantt.selectedRecords = [ ...gantt.selectedRecords, record ];
        }
        gantt.editTask(record);
    };

And you'll see that it will be working fine.

Good Luck :),
Tasnim


Post by hien.nguyen »

It worked, thanks.

Best regards.


Post by hien.nguyen »

Hi teams,

I've problem: when I resize 3 tasks very quickly, only 1 task have grey color. I want 3 tasks have grey color (because 3 tasks not yet finish sync).

Please share me the way to fix it.

Best regards.

Best regards.


Post Reply