I am trying to have dynamic data in a kendo grid which is determined at runtime. The structure of data is an array of arrays of objects. Visually, I would like to have dynamically generated column groups that contain two columns, and the columns have as many rows as objects within the array of arrays. I've been struggling how to make this happen, due to various issues. One issue is that the column indexes add even if they are being dynamically generated (but instead should be reset upon a new column group, but just increases with the next columngroup). I also noticed that the row size is always the same as the column size, because when adjusting the number of inner arrays, both the row size and column size are exactly the same, that is, the number of inner arrays, and the rowsize does not depend on the amount of objects within a given inner array (as it normally does were all the objects in the outer array, and that is the behavior I would want).
Here is a link that shows an example of what I'm talking about, with a normal html table on top that is in the style I'm looking for, and on the bottom the kendo grid that isn't styling like I want it to:
https://stackblitz.com/edit/angular-u9unhk?file=app/app.component.ts
(I've tried many different ways to mimic the top behavior but I have so far failed to do it. )
Any help would be greatly appreciated!