FullWidthCellRenderer edit function

281 Views Asked by At

I've created a full width cell to display kind of a "category" under which I put "items" (normal rows).

Editing is enabled for my columns. As soon as I try to tab from the previous cell into the full-width-cell, I'm getting an error.

enter image description here

This is the error:

core.mjs:6485 ERROR TypeError: nextCell.startEditing is not a function
    at NavigationService.moveToNextEditingCell (ag-grid-community.cjs.js:39561:18)
    at NavigationService.tabToNextCellCommon (ag-grid-community.cjs.js:39537:28)
    at NavigationService.onTabKeyDown (ag-grid-community.cjs.js:39473:36)
    at CellKeyboardListenerFeature.onTabKeyDown (ag-grid-community.cjs.js:21341:38)
    at CellKeyboardListenerFeature.onKeyDown (ag-grid-community.cjs.js:21304:22)
    at CellCtrl.onKeyDown (ag-grid-community.cjs.js:22220:42)
    at RowContainerEventsFeature.processCellKeyboardEvent (ag-grid-community.cjs.js:22676:34)
    at RowContainerEventsFeature.processKeyboardEvent (ag-grid-community.cjs.js:22658:18)
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25535:1)

Of course this is because there is nothing setup how editing should be handled. I've only seen the cellEditor field on the column-definitions. But this is not a column, its a row at index x that has to be handled differently.

From .startEditing in the error I at least tried to:

export default class FullWidthCellRenderer implements ICellRendererComp {
  eGui!: HTMLDivElement;

  constructor(
    // ... services
  ) { }

  init(params: ICellRendererParams) {
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = `<h3 class="full-row-cat">${params.data.category}</h3>`;

    let selector = this.eGui.querySelector('.full-row-cat');
    selector.addEventListener('mousedown', (event) => this.onMouseDown(params));
    selector.addEventListener('mouseup', (event) => this.onMouseDown(params));
  }

  getGui() {
    return this.eGui.firstChild as any;
  }

  refresh() {
    return false;
  }

  // Tried to implement the function here with hope it fires, it does not.
  startEditing() {
    console.log("START EDITING");
  }
}

So is there any way to create an edit-functionality? I could write my own one with double click, but the tab-feature from AG-Grid would still not work.

0

There are 0 best solutions below