[REACT] Custom column based on ResourceAssignmentColumn functionality

[vasyl obukh]

Hi,
Could you please give some recommendations on how to create a column in Gantt similar in some way to ResourceAssignmentColumn?

We want to have a column for skills which needs to be similar to resource assignments.

1. The column should show chips (non-closable) with task skills.
2. Combo editor should also show those chips in the input field.
3. In the editor picker we need to show a similar Grid as in the resource assignment editor picker: checkbox (checkboxOnly, showCheckAll, multiSelect), skill name column with filterbar, and skill level column (similar to units in the resource assignment editor picker).

   

   Screenshot 2024-02-23 at 9.52.34 AM.png (54.99 KiB) Viewed 119 times

Skills themselves have only "id" and "name" fields, but task.skills also have the "level" field. But we don't need such deep connections between skills and task skills as between resources and assignments.

I started by trying to copy and modify ResourceAssignmentColumn, AssignmentField, AssignmentPicker, and AssignmentGrid but it got too complicated.
In the attached files you see the current progress. So far data is displayed in the column and editor, and proper items are selected by default in the picker, but when I try to select something or set level, it's not saved.
As I understand there's an additional temporary store AssignmentsManipulationStore, and I just lost track of how data and event flow go, there are too many library internal things.

Also, now I am looking into TreeCombo, maybe it will cover our needs but I don't really understand how to manage stores in such case. I have an initial list of skills but each task's picker needs to show data based on what was selected for that task, so I can't have just one store.

Could you please give some recommendations on what approach to choose and what next steps should be in that approach?

[alex.l]

Hi vasyl obukh,

Actually we do not offer development in bounds of forum support, but if you need our help, feel free to contact our Sales for Professional Services https://bryntum.com/services/

But I can give you advices and recommendations about using our public API.

I started by trying to copy and modify ResourceAssignmentColumn, AssignmentField, AssignmentPicker, and AssignmentGrid but it got too complicated.

Yes, one of point we could suggest if you need something similar is to check source code.

As I understand there's an additional temporary store AssignmentsManipulationStore, and I just lost track of how data and event flow go, there are too many library internal things.

Not sure you need that in your case, you just select values for a record, that's much easier and not required in extra stores to prevent recalculations.

Also, now I am looking into TreeCombo, maybe it will cover our needs but I don't really understand how to manage stores in such case. I have an initial list of skills but each task's picker needs to show data based on what was selected for that task, so I can't have just one store.

You can create a store with data format that will fit your needs and apply it to combo editor, anyway all you need is ids as value, it doesn't really matter from which store it will be taken.
I suggest you to use https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#event-beforeCellEditStart to fill-in combo store for your editor with required data format according to record data or any other conditions and use https://bryntum.com/products/gantt/docs/api/Grid/widget/TreeCombo

Should be not really complex to implement if you won't take ResourceAssignmentColumn as a base.

[vasyl obukh]

Hi Alex,
Thank you for all the recommendations!
We decided to simply create our own React component and use it as an editor, but your response was really helpful as it's now a bit clearer how to interact with some of the parts of your libraries in the future

[tasnim]

Great!

If you have any other questions or concerns, feel free to reach out!

Good Luck