Hi,
In our project, we are attempting to create a grid with data that has certain columns that we'd like to expand further. I have created a diagram to try to illustrate what we'd like to do:
The initial grid would appear as the top, with columns 1,2 and 3. Then, when interacting with Cell 1 (clicking the arrow for example) another grid would then be accessible with data pertaining to that particular cell and appearing underneath that column.
We have tried using the hierarchical grid for this but this only seems to give the option to expand the whole row and the data in the grid is relevant to the whole row rather than the cell in particular. This obviously means the grid appears below as illustrated but not underneath the column whose cell is in question.
I hope I have explained this well enough, if you have any ideas for how we might implement this I would be very grateful!
Thanks,
Adam
Hello,
I have been looking into your question and an approach I could suggest is using the IgxHierarchicalGrid where you could hide the default expansion area by setting the display attribute of both header and expand cell elements to 'none':
::ng-deep { .igx-grid__hierarchical-expander--header { display: none; } .igx-grid__hierarchical-expander { display: none; } }
In addition, in order to expand the rows through some other column you could define a custom cell template in the required column that contains expand indicator and cell value.
In this case, you should also expand/collapse the rows through the API using the grid's toggleRow method which takes as argument row id. i.e. primary key and change the icon depending on the row expanded state as follows:
<igx-column field="Artist" [resizable]="true"> <ng-template igxCell let-cell="cell"> <div style="display: contents;"> <igx-icon (click)="cell.grid.toggleRow(cell.row.key)">{{ cell.row.expanded ? 'chevron_right' : 'expand_more' }}</igx-icon> {{ cell.value }} </div> </ng-template> </igx-column>
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. This solution seems to work quite well!
Additionally, I made the island width=50% and pushed it to the right by applying the following scss: