CODEWITHSUNDEEP
angularsyncfusionej2-syncfusion
Nick Randolph
Nick Randolph

Reputation: 171

Syncfusion Diagram in Angular 12 with data binding

According to the docs from Syncfusion the Diagram control (ejs-diagram) should support data binding using the datasourcesettings property (https://ej2.syncfusion.com/angular/documentation/diagram/data-binding/). I've been attempting to get this to work but it doesn't seem that any of the samples (from the docs) seem to work against Angular 12.

Repro steps:

Expected result: should be as per the docs Actual result: blank page. (Note that if I remove snapsettings I at least get the background grid to display)

I've also tried setting nodes explicitly both in html and by binding the nodes property and this seems to work

Upvotes: 0

Views: 1285

Answers (2)

Kamesh
Kamesh

Reputation: 71

We have created a sample for the diagram with a context menu. We have checked the diagram context menu feature in Angular 12 and it working fine. Also we can able to interact with the context menu. We suspect that the issue occurs because you do not inject the DiagramContextMenu module in the diagram or you do not add the context menu-related CSS in the style.css, So that the context menu does not gets appeared while right in the diagram. To use the context menu in the diagram, please inject the DiagramContextMenu module in the diagram and add the context menu-related CSS in the style.css file Please refer to the code snippet for how to inject DiagramContextMenu and how to use the context menu CSS.

//app.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Diagram, NodeModel, ConnectorModel, SnapConstraints, SnapSettingsModel, DiagramTools, ContextMenuSettingsModel, DiagramContextMenu } from '@syncfusion/ej2-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
Diagram.Inject(DiagramContextMenu)
public contextMenu: ContextMenuSettingsModel = { show: true}

;

// Style.css

@import '../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css';// Add the context menu related css

@import ../node_modules/@syncfusion/ej2-navigations/styles/material.css;

We have attached a video demonstration of how the diagram context menu gets worked. Please refer to the below video link.

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ContextMenu-Video1968682518

We have attached an Angular-12 sample with a context menu for your reference. Please find the sample in the below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular-ContextMenu1248041383

In case if the issue is still replicated, please share with us a simple sample illustrating the issue or modify the above sample replicating the issue with issue replication steps. This would help us to serve you better.

Upvotes: 2

Kamesh
Kamesh

Reputation: 71

Currently, we do not have full compatibility support for diagrams in Angular 12. We will provide the full compatibility support for the diagram in our Volume 2 2021 main release. However, we have checked the diagram dataBinding feature in Angular 12. We do not face any issues in the dataBinding. We suspect that the issue occurs because you do not inject the DataBinding and HiearchicalTree module in the diagram or do not include the diagram services in the app.module.ts. We have already mentioned in the documentation that how to inject the diagram modules in the app.module.ts. Please refer to the below documentation for how to inject the diagram modules.

Module-Injection: https://ej2.syncfusion.com/angular/documentation/diagram/getting-started/#module-injection

We have attached a video demonstration of how the diagram data binding sample gets run. Please refer to the below video link

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagram-DataBinding-Video-90404990

We have attached an Angular-12 sample for your reference. Please find the sample in the below link

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Diagram-DataBinding-670541750

In case if the issue is still replicated, please share with us a simple sample illustrating the issue or modify the above sample replicating the issue with issue replication steps. This would help us to serve you better.

Upvotes: 1

Related Questions