[Solved] Issue with diagram data binding

[Manolo]

Having an issue with data binding in the Diagram component. Adding an element to the bound shapes array does nothing. Adding it using addShapes works, although there is an inconsistency when the visual function gets called; the dataItem comes in options whereas when initializing it comes on options.dataItem.dataItem.

In addition, replacing the entire array seems to take effect, but seems to ignore the layout subtype. It's set to right but it does down.

See this example that show these issues:

https://stackblitz.com/edit/angular-qnmebrsa-ttiqwi6b?file=src%2Fapp%2Fapp.component.ts

 

[Zornitsa]

Hi Manolo,

Thank you for the example provided. I have investigated the Diagram component's behavior and will share some insights below.

Firstly, about adding shapes to the bound array dynamically, in such cases, we generally recommend using the spread operator (...) on the shapes array to create a new reference. This will trigger the component's change detection, and thus the newly added shape will be rendered as expected:

this.shapes = [...this.shapes, newShape];

In this line of thought, regarding the layout subtype being ignored when replacing the shapes array or creating a new reference for it, this is indeed considered a bug with the layout subtype defaulting to "down" instead of respecting "right". For this reason, I logged the following bug report in our public GitHub repository:

• https://github.com/telerik/kendo-angular/issues/4967

Feel free to subscribe to the above issue to stay notified of any updates. As a workaround, the developer can force a new reference to the layout object (this.flowLayout = { ...this.flowLayout }). This will trigger change detection and reapply the layout correctly.

Here is also the StackBlitz example from your previous reply, updated with both the first suggestion and the workaround:

• https://stackblitz.com/edit/angular-qnmebrsa-y5dykz1g 

I hope this helps.

Regards,
Zornitsa
Progress Telerik