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.
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.
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
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.
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.