How can I achieve this this grid structure with igx-grid Angular? Kindly provide sample if possible. Using column-layout unable to achieve this as it is showing hearders in different places as per colstart and rowstart. I need exact this view with grid.
Thanks in advance!
Hello Disha,
I have found a forum post that describes similar scenario to yours, based on it I was able to create a small sample with the data you have provided, which recreates the grid layout you shared above.
This approach uses cell templating and complex data binding. The values for the Region and Market fields should be arrays, in the cell template they are looped and for each element of the array a div with border is created to simulate the look of an individual cell.
I would also like to mention that features that operate on the data such as Sorting, Filtering etc. will not consider the templated cell values, meaning that if you want to use those features you would have to implement a custom logic for those fields.
You can find the sample here:
https://stackblitz.com/edit/angular-f2w2hv?file=src/app/grid/grid-multi-row-layout/grid-multi-row-layout.component.html
I am also attaching a screenshot of how the grid layout looks:
Please test the sample and me know if you have any questions.
Regards, Ivan Kitanov
Hi Ivan,
Thank you so much! It worked as expected!