Hi,
I am having an issue when trying to access the Header property of dynamically generated columns on an igx-grid.
When creating the following grid with an ngFor for the columns:
Using this data:
I get the following grid, which is exactly what I want (row data is unimportant for this demo):
However, I want to be able to use the column's header to perform some functionality when I select a cell. I use the following function to display the column object:
But when selecting anything from any column (in this example, the first cell in the 'column 2'), the console returns the following:
Investigating further, just receiving the column returns the column object and, right enough, the header is incorrect:
It seems that in dynamically generated columns, even though the headers are visibly set, selecting the cell does not return the correct column header, instead defaulting to the first one.
Can you propose a solution to this problem?
Thanks!
Adam Drew
Hello,
I have been looking into your question and prepared a small sample in order to test the behavior.
After an investigation, I have determined that the issue is because the columns' fields are not set.
The header property of the columns is the text displayed in their header area, however, setting the field is actually binding the column to a certain field in the data source.
After the field of the column is set properly, everything seems to work as expected on my side and the correct header value is returned.
Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.
Sincerely,Teodosia HristodorovaSoftware Developer
Thanks for the response.
So I didn't set the field in my demo example, however in my actual project I had done, so that was an oversight for me. The only difference in my actual project is that the field that's being set is an object, rather than a string. This is necessary because it is a hierarchical grid and the expanded data for the row island stems from this object - the actual cell value is determined in a template, which works correctly.
So the field and header are both determined but when I look at the column data, all the generated columns are set to the same heading - the first one generated. Does this make sense? I can provide an example if necessary but I'd have to construct it through a demo as the data in the actual project is sensitive.
Adam
I am glad that you managed to achieve your requirement.
Please do not hesitate to let me know if you have any further questions on this matter.
Regards,Teodosia HristodorovaSoftware Developer
Upon further investigation, I now realise the field wasn't quite set correctly, as I was trying to set the field to be the same as the key value of the rowIsland - I thought the two had to be connected. I now realise that I needed to set the field to an actual property, not an object, so I've fixed it for now by setting the field to be the same as the header. It's not quite right but it at least sets the headers correctly, which is the problem I was trying to solve.
Thanks for pointing me in the right direction!