Append html to td, from afterChange method, use case is to not allow duplicate entry in a column, and add custom html to td if found any

Tags: #<Tag:0x00007f8b25b4f5c0>
#1

What i’m trying to do is this, but its not updating td element , like it does in cell renderer.

checkIfCol0Unique() {

const column = this.tableInstance.getDataAtCol(0);

column.forEach((value, row) => {

  if (!(value == null || value === '')) {

    let data = extend([], column);

    const index = data.indexOf(value);

    data.splice(index, 1);

    const second_index = data.indexOf(value);

    let cell = this.tableInstance.getCellMeta(row, 0);

    let td = this.tableInstance.getCell(row, 0);

    if (index > -1 && second_index > -1) {

      this.setErrorContent(td, {

        id: 'ipaddressduplicate',

        contentText: "No Duplicate Value allowed"

      })

    } else {

      console.log("td", td);

    }

  }

});

//force a re-render so the new cell properties show up

this.tableInstance.render();

}

setErrorContent(td: any, config: any){

td.className = 'htInvalid current highlight justify-end';

let Template: any;

Template = this.document.createElement('mat-icon');

Template.className =

  'mat-icon icomoon justify-end Info-Outline color-accent';

Template.setAttribute('id', config.id);

const tooltip: any = new Tooltip().instance(Template);

tooltip?.setContent(config.contentText);

td.appendChild(Template);

}

#2

Hi @arcodetracks

We do not have a built-in duplicates validator so I do not have any code samples to send.

However, If you need any guidance please contact me at support@handsontale.com along with information on your current support plan. Then I will propose some possible approaches we can take to resolve the issue.

#3

Hi @aleksandra_budnik, thanks for quick response

I think this can be achieved by updating td element which we can get from
let td = this.tableInstance.getCell(row, column);

Is there any way to, append child to this td and update it .
Maybe using a cell editor to update td.

If not possible , there is a serious need of a new method such as this.tableInstance.setCell(row, column, td);

Thanks

#4

@arcodetracks you can use an HtmlRenderer to alter the content of the cell. It also allows adding any HTML inside the cell. Here is an example https://jsfiddle.net/Lvno2y4x/1/

#5

@aleksandra_budnik You are right, we can do it this way , although i have a use case where I need to alter the TD cell content outside the Renderer.

Is that anyhow possible?

If not we can close this topic, and add this as a feature request.
Thanks

#6

What do you mean by alter the TD cell content outside the Renderer - like without doing a call to a cell renderer?

#7

Yes, without calling a cell renderer, in afterChange hook of handsontable.
I want to change cell’s html content if I have row & column index.

Anyhow Possible?

#8

Both methods setDataAtCell and setSourceDataAtCell trigger cell renderer. The same goes for the loadData and updateSettings > data. Whenever you want to change a value is a cell Handsontable call a renderer. And it does change if you call any of those methods in the afterChange as the cell renderer will be called one more time. The beforeChange also calls the renderer.

#9