Access current data in cells function in Angular

Tags: #<Tag:0x00007efc6051b7e8>
#1

Hello,
I’m trying to dynamically render cells depending on cell’s data values (some cells should be datepickers, some dropdowns etc) in Angular.
Unfortunately, all examples I found are not working at the part when I’m trying to get the current cell’s value. Seem like depending on example I found it’s always either this.instance is not recognized or getDataAtCell is failing for not defined object.
And different examples have different technics and different declarations so I’m lost at the moment and not sure which ones are outdated and which ones are correct. Your help in identifying the proper way of getting the cells value in cells function would be appreciated. Thank you very much.

Some of the examples I found:

#2

Hey @argo.argishtin

here’s https://stackblitz.com/edit/angular-ocwp9h?file=src/app/hello.component.ts a full example of using setDataAtCell (that is used to manage cell dependencies) in the Handsontable for Angular. I found it an easiest way to manage changing data.

#3

Thanks, but not sure how can I use this. To clarify: I believe I need getDataCell, not setDataCell as in one of the recent tickets I was told how to dynamically render different cells using cells function (similar to this:
https://stackblitz.com/edit/angular-handsontable-custom-editor-kjwxzd?file=app%2Fapp.component.ts ) It is great, but it uses hard-coded indexes and I need to determine cell’s render type based on cell’s data, not index number.
This example is doing it:
https://stackblitz.com/edit/angular-handsontable-rjc9zn
but const hot = this.instance; does not work for me, I can’t get the instance , then again in the example the version is different: “@handsontable/angular”: “1.0.0-beta4”, and I’m using “@handsontable/angular”: “^5.0.0” so not sure if it is version related or it’s something else.
Thanks.

#4

The this changes across the versions of the wrapper. You had an instance as the first parameter of each hook after in the newer version you get the parameter defined by the documentation.

The getDataAtCell is a good pick if you need to base some calculations based on the content of the cell. You just need to check if the coordinates are correct as if you

  • change order of rows/columns
  • sort data
  • filter data
  • remove rows/columns
  • hide rows/columns

the indexes (physical and visual) aren’t the same. This way you may need the

  • toPhysicalColumn
  • toPhysicalRow

methods as well.

#5

Thanks, so what you are saying I should use setDataCell, right? But still not sure how to use it to render cell as a dropdown or as a datepicker depending on the cell’s data (to clarify: on load, not on a user change). In your example and in documentation (https://handsontable.com/docs/7.3.0/Core.html)
it only shows how to change the current value to the new one.

#6

I was able to get dynamically cell values and assign the cell types accordingly after implementing the following:

cells: (row, col, prop)=> {
  let cp = {} as { type: string, source: string[]};
  const hot = this.hotRegisterer.getInstance(this.id);
  var data = hot.getDataAtCell(row, col);        
  if(data === "date"){
    cp.type = 'date';          
  }
  if(data === "boolean"){
    cp.type = 'dropdown';
    cp.source = ['True', 'False']
    }
  return cp
},

but if I need to clear the values in these cells after cell type has been assigned how do I do that? I tried putting hot.setDataAtCell(row,col,’’) in the same cells function but getting “Maximum call stack size exceeded” error.

#7

you can use setDataAtCell method but add a loop blocker.

You can add an IF statement to stop the loop if data === ''

#8