What possible reasons could be preventing communication between nodes in the ej2 DiagramComponent?

Trying to establish a connection between nodes using a datamanager, but encountering an issue when specifying connectionDataSource. The nodes disappear and the screen is left empty, with no errors in the console.

@Component({
  selector: 'app-relationship-playground-component',
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [layout]='layout' [dataSourceSettings]='dataSourceSettings' [getNodeDefaults]='nodeDefaults' [getConnectorDefaults]='connectorDefaults'>
  </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})
export class RelationshipPlaygroundComponentComponent implements OnInit{
// rest of the code removed for brevity
}

I referred to the documentation and sample repository for guidance:

https://github.com/syncfusion/ej2-samples/blob/master/src/diagram/crud.ts

https://ej2.syncfusion.com/angular/documentation/diagram/data-binding#how-to-perform-editing-at-runtime

Answer №1

A DataManager-powered Hierarchical Tree layout has been successfully displayed. To achieve this layout, you must provide a JSON object with Id and parentId properties to the DataManager, which is then assigned to the dataSource property in dataSourceSettings. The rendering of the layout is based on the ID and parentId specified in the layout structure. Notably, there is no requirement to set a connectionDataSource while rendering the layout.

For further information, please refer to the official documentation:

You can also explore a sample implementation here: https://stackblitz.com/edit/angular-dzj1jr-87pxp8?file=src%2Fapp.component.html

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Cache for JSON Schema in VS Code

After updating to TypeScript 1.5 (now out of beta), I am eager to utilize the json schema helpers in VS Code. Upon configuring tsconfig.json, I noticed that only commonjs and amd module options are available, while umd and system are missing based on this ...

Angular two - Communication between parent and children components using a shared service

I am currently working on establishing communication between child components, but according to the documentation, I need to utilize services for this purpose. However, I am facing challenges in accessing service information. When I try to assign the retur ...

Error: Unable to locate script.exe when spawning the Nodejs process

When trying to run an exe in my electron app, I am encountering an error. Even though the path is correct, it still throws an error. Uncaught Error: spawn exe/0c8c86d42f4a8d77842972cdde6eb634.exe ENOENT at Process.ChildProcess._handle.onexit (inter ...

Encountering an error in an Angular 4 application when running in Internet Explorer 11: "Unable to execute code from a script that has been freed

I am encountering an issue with my Angular app, which I believe is running version 4. The problem arises in Internet Explorer 11 during a login sequence and the error message states "Can't execute code from a freed script". The IE console points to li ...

Encountering a syntax error when attempting to utilize the colon symbol for specifying data types

Currently, I am a novice who is delving into the world of TypeScript. Here is a snippet of code that I have written: let num: number = 123; console.log(123); However, when attempting to run this file using Node.js and saving it as test.ts, I encounter the ...

Combinations of Typescript dependent unions

I'm struggling with calling the given union that wraps a function and its argument. Is there a way to call it without having to cast? type Wrapper = { fn: (a: string) => void arg: string } | { fn: (a: number) => void arg: number } let f ...

Incorporate Font Awesome icons throughout your Angular8 application for added visual appeal

I'm currently working on a large Angular application that utilizes lazy loading modules. Throughout various components in different modules, I make use of icons from Font Awesome individually. Here is an example: In component.ts: import { faChevronD ...

How to retrieve start and end time values from dropdown options using formArray in Angular 8

Within my form group, I have start time and end time select options in a form array. My goal is to dynamically update the end time array based on the selected start time. <div [formGroupName]="skillIndex"> Start at: <select ...

Combining Babel with Typescript, utilizing NPM modules, and optimizing with Webpack

Hey there! I've been trying to include Angular in my TypeScript script, but unfortunately I keep encountering this error: error TS2307: Cannot find module 'angular'. I have attached my webpack configuration file below: context: __dirname ...

What is the best way to remove the underline from Angular Material input fields?

I am currently working with an input element in Angular Material: <md-input-container> <input type="text" mdInput placeholder=""> </md-input-container> While the input is focused, it displays an underline. Is there a way to hide or remo ...

Executing an observable only when a certain variable is in a specific state at the class level

Is there a way to conditionally return an observable in a clean manner, based on a predefined condition? Let's look at the scenario below: isEditing = false; // <---- Variable defined at class level return this.usersService.fetchInitialCreateDat ...

"Encountering an issue with opening a form in a child component from the parent - receiving an error message 'unable to access

Here's the scenario: I am working with a list of companies that each have an array of projects as one of their variables. The desired functionality is to display the list of companies in the parent component/html, and only open a child component to sh ...

What is the best way to apply ngClass to an element based on certain conditions?

My service maintains the state of opened blocks like so: export class BlocksStateService { public openedBlockState = new Map<number, boolean>; setState(id: number, state: boolean) { this.openedBlockState.set(id, state); } getStat ...

Combining Multiple Arrays into a Single Array

Is there a way to combine this merge operation that creates one array using forEach into a single array at the end? affProd.pipe(mergeMap( event1 => { return fireProd.pipe( map(event2 => { const fi ...

Kendo's comboBox for local virtualization

Looking to implement virtualization for local data using the kendo object ComboBox. I've tried different methods, but only the current page (first 40 elements) is displayed. I followed a code structure similar to the kendo virtualization tutorial an ...

Singleton Pattern in Angular Dependency Injection

In my code, I have a service called MyService that is decorated with the following: @Injectable({ providedIn: 'root' }) Part of its implementation includes: private myData: string = ''; setData(data: string) { this.myData = d ...

Using the differences of discriminated unions

Consider the scenario where discriminated unions and associated types are defined as follows: type Union = 'a' | 'b'; type Product<A extends Union, B> = { f1: A, f2: B}; type ProductUnion = Product<'a', 0> | Produ ...

Choose from a variety of options for color schemes and hover effects

Looking to create a selector where users can pick a color. I tried changing the background color for each option, but when hovering over them, the background turns blue - which is not what I want. Check out the pictures for clarification: https://i.sstatic ...

Tips for fixing the error message "unable to access property 'property-name' of null"

I need assistance with retrieving data from a firebase database and storing it in an array using typescript. Below is the code snippet I am working with: export class ViewUserPage { public list = []; public ref = firebase.database().ref(); public ...

Error in Angular compiler-cli: The namespace 'ts' does not contain the exported member 'ResolutionMode'

Currently working on a web application using Angular 16 in Webstorm. The application is still in the pre-release stage, with only minimal functionality completed so far. While editing with ng serve running to test changes as they were made, encountered an ...