Our state of the art Gantt chart


Post by isadogan »

Hi,

I want to add a custom column to the resources tab which has a dropdown like the resource column. Then send it to the backend with the other resource & units.

Any way to do this?

Thanks

Attachments
taskeditmodal.png
taskeditmodal.png (20.5 KiB) Viewed 213 times

Post by tasnim »

Hi,

What type of column do you want to add (what field)?


Post by Animal »

You can configure the columns of the grid like this example does: https://bryntum.com/products/gantt/examples/taskeditor/

columns is a store, so its data is a column set. An object is merged in with existing columns.

Screenshot 2023-03-30 at 08.30.25.png
Screenshot 2023-03-30 at 08.30.25.png (182.92 KiB) Viewed 196 times

Post by isadogan »

Thank you for your responses.

I've added the custom column but, have not implemented it as a dropdown yet.

I have a ResourceModel like:

{name, unit, level}

I want to put "level" as dropdown into the FOO(level) column which I can select like the Resource column.

Thanks


Post by isadogan »

I've added these lines but have not mapped with model. What am I missing?

const resourceLevelCombo = {
    type: "combo",
    valueField: "id",
    displayField: "name",
    onChange: (e) => {},
    store: {
      idField: "id",
      data: [
        { id: 1, name: "Test 1" },
        { id: 2, name: "Test 2" },
        { id: 3, name: "Test 3" },
      ],
    },
  };
 taskEdit: {
          items: {
            resourcesTab: {
              items: {
                grid: {
                  columns: {
                    data: {
                      foo: {
                        text: "Level",
                        field: "resourceLevelId",
                        width: 200,
                        flex: 1,
                        editor: resourceLevelCombo,
                      },
                    },
                  },
                },
              },
            },
          },
        },
      },
class GanttResourceModel extends ResourceModel {
  static get fields() {
    return [
      { name: "name", dataSource: "Name" },
      { name: "id", dataSource: "Id" },
      { name: "calendarId", dataSource: "CalendarId" },
      { name: "resourceLevelId", dataSource: "ResourceLevelId"  },
    ];
  }
}

Post by Animal »

All looks good. That should work. What exactly is not working?


Post by isadogan »

1) I selected the "level". But I can't see the selected value in the "Level" column like other "Frontend Developer", "100%"

2) When I click the "Save" button, nothing happens. Not call sync action.

Attachments
ss.png
ss.png (19.88 KiB) Viewed 178 times

Post by tasnim »

Hi,

Could you please upload a test case so we can run, reproduce and debug the issue?


Post by isadogan »

Hi Tasnim,

I found the problem. I should have add "resourceLevelId" to "AssignmentModel", not "ResourcesModel" :)

I hope that this one is will be the last question :) which is how to add store data dynamically in runtime.

First I define combobox's store data as empty array. I make an api call to get ResourceLevels, when I receive the data, I want to set it into combobox store data.

Any way to do this?

taskEdit: {
              items: {
                resourcesTab: {
                  items: {
                    grid: {
                      columns: {
                        data: {
                          foo: {
                            text: "Level",
                            field: "titleLevelId",
                            editor: {
                              type: "combo",
                              valueField: "id",
                              displayField: "name",
                              onChange: (e) => {},
                              store: {
                                idField: "id",
                                data: [] <------- I want to set the response data there.
                              },
                            },
                          },
                        },
                      },
                    },
                  },
                },
              },

And also I select "Aşçı" for "Level" column. But it shows 88(id). How can I show the name? I've shared screenshots.

Thanks

Attachments
ss2.png
ss2.png (11.7 KiB) Viewed 150 times
ss1.png
ss1.png (8 KiB) Viewed 150 times

Post by tasnim »

Hi,

This code will help you to achieve that

    listeners : {
        // load the data into store
        beforeTaskEditShow({ editor }) {
            const column = editor.widgetMap.resourcesTab.grid.columns.get('titleLevelId');
            column.editor.store.data = [{ id : 1, name : 'A1'} , {id : 2, name : 'A2'}, {id : 3, name : 'A3' }];
        }
    },
    features : {
        taskEdit: {
              items: {
                resourcesTab: {
                  items: {
                    grid: {
                      columns: {
                        data: {
                          foo: {
                            text: "Level",
                            field: "titleLevelId",
                            renderer : (props) => {
                                // display the name in the cell
                                const value = props.column.editor.store.data.find(item => item.id === props.value);
                                return value?.name;
                            },
                            editor: {
                              type: "combo",
                              valueField: "id",
                              displayField: "name",
                              onChange: (e) => {},
                              store: {
                                data: []
                              },
                            },
                          },
                        },
                      },
                    },
                  },
                },
              }
        }
    },

https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskEdit#event-beforeTaskEditShow


Post Reply