[REACT] Auto open dropdown on cell click

[ahmad.siddique]

Hi everyone,

I have a combo column in Gantt and I want to open the dropdown automatically once the user clicks on the cell.

In the Advanced demo, we have a Complexity column which is similar to my column.

Screenshot 2024-03-05 at 4.21.46 PM.png (11.1 KiB) Viewed 123 times

Currently, the user has to click on the cell and then click on the arrow-down icon to open the dropdown.
what I want is When the user clicks on the cell the input should be disabled and the dropdown should be shown.

Any idea how can I achieve this functionality?

[tasnim]

Hi,

You could achieve it by listening to https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#event-startCellEdit event

    listeners : {
        startCellEdit(props) {
            const { editorContext : { column } } = props;
            if (column.$$name === 'ComplexityColumn') {
                column.editor.showPicker();
                column.editor.editable = false;
            }
        }
    }

Docs
https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#property-editable
https://bryntum.com/products/gantt/docs/api/Core/widget/Combo#function-showPicker

[ahmad.siddique]

Thanks for the solution Tasnim,

Using the solution you provided I have disabled the editable functionality but to show the drop-down I still have to click two times on the cell, it does not open automatically.
On the First Click cell is focused and on the second click the drop-down opens.

Screenshot 2024-03-06 at 10.25.25 AM.png (17.12 KiB) Viewed 100 times

this is my code :

<BryntumGantt
      {...staticGanttConfig}
      ref={bryntumRef}
      columns={columns}
      onBeforeCellEditStart={(event) => {
        const { type, editor } = event.editorContext.column as any;
        if (type === "statuscolumn") {
          editor.editable = false;
          editor.showPicker();
        }
      }}
    />

I am also attaching a runnable test case.

[tasnim]

Hi,

Sorry, I missed that. You could listen to the cellClick event to start cell edit on click

Here is the modified <BryntumGantt> JSX
You can replace it with yours to see the result

    <BryntumGantt
      {...staticGanttConfig}
      ref={bryntumRef}
      columns={columns}
      onStartCellEdit={(event) => {
        const { type, editor } = event.editorContext.column as any;
        if (type === "statuscolumn") {
          editor.editable = false;
          editor.showPicker();
        }
      }}
      onCellClick={(props) => {
        const { column, grid } = props;
        // @ts-ignore
        if (column.type === 'statuscolumn') {
          // @ts-ignore
          grid.startEditing(column.location);
        }
      }}
    />

Docs
https://bryntum.com/products/gantt/docs/api/Grid/view/mixin/GridElementEvents#event-cellClick
https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#event-startCellEdit
https://bryntum.com/products/gantt/docs/api/Grid/feature/CellEdit#function-startEditing

Hope it helps.

Best regards,
Tasnim

[ahmad.siddique]

thank you Tasnim, this fixed the issue