Add grids in the same component when clicking a button

[Jose]

Hi there,

I am trying some days to create grids by clicking a button. My first idea was to create a "ngFor" to an arrayList of grids and add that grid when clicking the button. However, I have not achieved this functionality and I did not see information on web.

I would be grateful if you could guide me into a solution.

Also, it is important to maintain the previous functionalities that I added. To simplify a little bit, I did a little change in https://www.telerik.com/kendo-angular-ui/components/knowledge-base/drag-drop-between-grids/ example code.

Regards,

Jose

[Dimiter Madjarov]

Hi Jose,

Indeed the idea with an array list and a button is applicable in the current scenario. One requirement is on to change the array instance on button click, as this would automatically trigger change detection cycle without any additional logic. Here is an example of this approach in action:

https://stackblitz.com/edit/angular-uwdhbh?file=app/app.component.ts

Regarding the drag and drop functionality, the current drag events handlers should be modified with the additional logic needed to determine on which (and from which) grid was the corresponding item dropped. As this is considered rather custom functionality, it is in the hands of the developer to handle the mentioned modification.

I hope this information helps.

Regards,
Dimiter Madjarov
Progress Telerik

[Jose]

Hi again,

Thanks for the answer, it was helpful. I have another question that might me useful for my requirements. Is there any option to reference grids dinamically inside an *ngfor?

I think about "index as i" option in *ngFor, something like this, but I do not know how to implement this:

<div *ngFor="let grid of gridList; index as i"> 
   {{i}} 
   <kendo-grid 
   [data]="grid" 
   [reorderable]="true" 
   #grid+i 
   (mouseenter)="onCurrentGrid(grid+i)"> 
   ... 
   </kendo-grid>
</div>

Regards,

Jose

[Dimiter Madjarov]

Hi Jose,

In this case one has to ensure that each string in the iterated grid list is unique, thus adding a unique index in the for loop won't be needed.

This way we could directly use

(mouseenter)="onCurrentGrid(grid)"