Angular Syncfusion Gantt Single Click Cell Editing

[-]

In angular syncfusion gantt component, in the grid section, can we do the editing(make the row in to edit mode) using single click. Currently it is turning in to edit mode with the double click. We want this feature, because in MS project , we don't want to double click the row to edit and Add the records.

[Sridharan Jayabalan]

Hi Hariprasath,

 

Greetings from Syncfusion.

 

For your query, we can understand that you need to enable cell edit for single click instead of double click. To achieve your requirement, we prepared a sample by using load event in the Gantt and saveCell/editCell methods of the Grid component.

 

The below workaround attaches a mouseup listener to the Gantt element and detects whether a valid grid cell (e-rowcell) was clicked. If a cell is already in edit mode, it forces a save using saveCell() before handling the next click. After confirming the clicked cell’s row index and column index, the code programmatically calls editCell(rowIndex, field) to enter edit mode on a single click. This bypasses the default double‑click behavior and makes Syncfusion Gantt enter edit mode immediately on the first click.

 

Refer the below code snippet and sample for your reference.

 

Sample - https://stackblitz.com/edit/angular-hfblgbpb-r4bdtsmg?file=src%2Fapp.component.ts,src%2Fapp.component.html

 

Code-Snippet:



export class AppComponent {

  @ViewChild('ganttEdit')

  public ganttObj: GanttComponent;

  

  load() {

    this.ganttObj.element.addEventListener('mouseup', (e: MouseEvent) => {

      const clicked = (e.target as HTMLElement).closest(

        'td'

      ) as HTMLElement | null;

 

      if (

        clicked !== null &&

        clicked.classList.contains('e-rowcell') &&

        !(e.target as HTMLElement).classList.contains('e-treegridexpand') &&

        !(e.target as HTMLElement).classList.contains('e-treegridcollapse') &&

        clicked.getAttribute('aria-colindex') !== null

      ) {

        const target = clicked;

 

        if (

          this.ganttObj.treeGrid.grid.isEdit &&

          !target.classList.contains('e-editedbatchcell') &&

          !document.getElementsByClassName('e-addedrow').length

        ) {

          this.ganttObj.treeGrid.grid.saveCell(); // calling saveCell method

        }

 

        if (!this.ganttObj.treeGrid.grid.isEdit) {

          const indexAttr = target.getAttribute('data-index');

          const index = indexAttr ? parseInt(indexAttr, 10) : NaN;

 

          // changed: parse the 'aria-colindex' attribute to number BEFORE subtracting

          const colIndexAttr = target.getAttribute('aria-colindex');

          const colindex = colIndexAttr ? parseInt(colIndexAttr, 10) - 1 : NaN;

 

          if (!Number.isNaN(index) && !Number.isNaN(colindex)) {

            const field =

              this.ganttObj.treeGrid.grid.getColumns()[colindex].field;

            this.ganttObj.treeGrid.editCell(index, field); // calling editCell method

          } else {

            // optional: debug to help detect missing attributes

            console.warn(

              'Missing or invalid Index / aria-colindex on target cell',

              target

            );

          }

        }

      }

    });

  }

}

 

Please get back to us if you need further assistance.

 

Regards,

Sridharan