Bryntum Support Forums

Sorry again,

I've error

taskRecord is null

I tried to log

gantt.selectedRecord

and it's null

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.

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.

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

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.

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.

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.

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

It worked, thanks.

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.