Problem with Diagram

Question

good morning i am making a diagram for a client, but the client wants it in angular. I am more experienced in blazor.

I have a problem with displaying data coming in from an API call made in dotnet. With the same call i did a simple grid and i'm sure that my data are there.

can you please tell me where I am going wrong ? THX .Angular is not my backyard

this the code

import { DiagramModule, HierarchicalTreeService, DataBindingService } from '@syncfusion/ej2-angular-diagrams'

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Diagram, NodeModel, ConnectorModel, SnapConstraints, SnapSettingsModel, DiagramTools } from '@syncfusion/ej2-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
import { DecoratorModel, StrokeStyleModel } from '@syncfusion/ej2-angular-diagrams';
import { HttpClient } from '@angular/common/http';
import { DataInfo } from '../diagram-data/diagram-data.component'; // recupera da altro componente 
import { GridModule } from '@syncfusion/ej2-angular-grids';



@Component({

  imports: [
    DiagramModule, GridModule
],

  providers: [HierarchicalTreeService, DataBindingService],
  standalone: true,
  selector: 'app-diagram-albero',
  templateUrl: './diagram-albero.component.html',
  styleUrls: ['./diagram-albero.component.css'],
  encapsulation: ViewEncapsulation.None
})


export class DiagramAlberoComponent implements OnInit{

  constructor(private http:HttpClient) {} // costruttore per chiamata API 
  
  items:any=[];
  items2:any=[];

  modalTitle ="";
  Id = 0;
  ParentId = 0;
  Name = "";
  FirstName = "";
  LastName = "";

  ngOnInit(): void {
    this.refreshlist();
  }

  // chiamata ad API 
  refreshlist() {
    this.http.get<any>('https://localhost:7081/api/AlberoItem')
    .subscribe(data=>{
        this.items=data;
    });

    this.http.get<any>('https://localhost:7081/api/AlberoItem')
    .subscribe(data=>{
        this.items2=data;
    });
  
  }  

  
  public node?: NodeModel;
    public nodeDefaults(node: NodeModel): NodeModel {
        let obj: NodeModel = {};
        obj.shape = { type: 'Basic', shape: 'Rectangle' }; // tipo del box 
        obj.style = { strokeWidth: 1 }; 
        obj.width = 95; 
        obj.height = 40; 
        return obj;
  };


  public data: Object = {
    id: 'Id', parentId: 'ParentId', dataManager: new DataManager(this.items), //  
    //binds the external data with node
    doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
        nodeModel.annotations = [{
            /* tslint:disable:no-string-literal */
            content: data['Name'], margin: { top: 10, left: 10, right: 10, bottom: 0 },
            style: { color: 'black' }
        }];
        /* tslint:disable:no-string-literal */
        nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };
    }
};


public connDefaults(connector: ConnectorModel): void {
  connector.type = 'Orthogonal';
  ((connector as ConnectorModel).style as StrokeStyleModel).strokeColor = '#4d4d4d';
  ((connector as ConnectorModel).targetDecorator as DecoratorModel).shape = 'None';
};

public tool: DiagramTools = DiagramTools.ZoomPan;
public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };
public layout: Object = {
    type: 'HierarchicalTree', horizontalSpacing: 40, verticalSpacing: 40,
    margin: { top: 10, left: 10, right: 10, bottom: 0 }
};

}


HTML with diagram without data and grid with data OK 

<p>diagram-albero works!</p>
<ejs-diagram 
    #diagram id="diagramAlberoItem" 
    width="100%" 
    height="490px" 
    [getConnectorDefaults]='connDefaults' 
    [getNodeDefaults]='nodeDefaults' 
    [tool]='tool' 
    [layout]='layout' 
    [dataSourceSettings]='items' 
    [snapSettings]='snapSettings'>
</ejs-diagram>

<ejs-grid [dataSource]='items2'> 
    <e-columns>
        <e-column field='Id' headerText='ID' textAlign='Left' width=40></e-column>
        <e-column field='ParentId' headerText='Parent ID' textAlign='Left' width=40></e-column>
        <e-column field='Name' headerText='Azienda' textAlign='Left' width=140></e-column>
        <e-column field='FirstName' headerText='Nome' textAlign='Left' width=140></e-column>
        <e-column field='LastName' headerText='Cognome' textAlign='Left' width=140></e-column>
    </e-columns>
</ejs-grid>

diagram-albero works!

Vivisa Ganesan · Answer

Hi,We've analyzed the code snippet you shared and identified an issue related to binding the data in the datasourceSettings. Instead of directly binding the items property, you should bind the data property. Please refer to the below modified sample and code-snippet:Code-snippet: app.component.html app.component.ts public data: Object = { id: 'Name', parentId: 'Category', dataManager: new DataManager(items), // //binds the external data with node doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => { nodeModel.annotations = [{ /* tslint:disable:no-string-literal */ content: data['Name'], margin: { top: 10, left: 10, right: 10, bottom: 0 }, style: { color: 'black' } }]; /* tslint:disable:no-string-literal */ nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 }; } }; Regards,VivisaAttachment: layout_f9bcbd98.zip

Francesco Pruneri · Answer

Hi there i did so .

public data2: Object = {
    id: 'Id', parentId: 'ParentId', dataManager: new DataManager(this.items), //  
    //binds the external data with node
    doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
        nodeModel.annotations = [{
            /* tslint:disable:no-string-literal */
            content: data['Name'], margin: { top: 10, left: 10, right: 10, bottom: 0 },
            style: { color: 'black' }
        }];
        /* tslint:disable:no-string-literal */
        nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };
    }
};

<ejs-diagram 
    #diagram id="diagramAlberoItem" 
    width="100%" 
    height="490px" 
    [getConnectorDefaults]='connDefaults' 
    [getNodeDefaults]='nodeDefaults' 
    [tool]='tool' 
    [layout]='layout' 
    [dataSourceSettings]='data' 
    [snapSettings]='snapSettings'>
</ejs-diagram>


Same result i see anything on the diagram 
Sorry but i can't understand differences between your cod and mine 



datasource is "data" ? not "items" ? well changed also it but nothing happens 
dataSourceSettings]='data' 

Francesco Pruneri · Answer

I did some other test

import { DiagramModule, HierarchicalTreeService, DataBindingService } from '@syncfusion/ej2-angular-diagrams'

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Diagram, NodeModel, ConnectorModel, SnapConstraints, SnapSettingsModel, DiagramTools } from '@syncfusion/ej2-diagrams';
import { DataManager } from '@syncfusion/ej2-data';
import { DecoratorModel, StrokeStyleModel } from '@syncfusion/ej2-angular-diagrams';
import { HttpClient } from '@angular/common/http';
import { DataInfo } from '../diagram-data/diagram-data.component'; // recupera da altro componente 
import { GridModule } from '@syncfusion/ej2-angular-grids';



@Component({

  imports: [
    DiagramModule, GridModule
],

  providers: [HierarchicalTreeService, DataBindingService],
  standalone: true,
  selector: 'app-diagram-albero',
  templateUrl: './diagram-albero.component.html',
  styleUrls: ['./diagram-albero.component.css'],
  encapsulation: ViewEncapsulation.None
})


export class DiagramAlberoComponent implements OnInit{

  constructor(private http:HttpClient) {} // costruttore per chiamata API 
  
  items:any=[];

  modalTitle ="";
  Id = 0;
  ParentId = 0;
  Name = "";
  FirstName = "";
  LastName = "";

  ngOnInit(): void {
    this.refreshlist();
  }

  // chiamata ad API 
  refreshlist() {
    this.http.get<any>('https://localhost:7081/api/AlberoItem')
    .subscribe(data=>{
        this.items=data;
    });
    
  
  }  

  
  public node?: NodeModel;
    public nodeDefaults(node: NodeModel): NodeModel {
        let obj: NodeModel = {};
        obj.shape = { type: 'Basic', shape: 'Rectangle' }; // tipo del box 
        obj.style = { strokeWidth: 1 }; 
        obj.width = 95; 
        obj.height = 40; 
        return obj;
  };

  public objectdata: Object = {
    id: 'Id', parentId: 'ParentId', dataManager: new DataManager(this.items), //  
    //binds the external data with node
    doBinding: (nodeModel: NodeModel, sourcedata: DataInfo, diagram: Diagram) => {
            nodeModel.annotations = [{
                /* tslint:disable:no-string-literal */
                content: sourcedata['Name'], margin: { top: 10, left: 10, right: 10, bottom: 0 },
                style: { color: 'black' }
                 }];
    
        /* tslint:disable:no-string-literal */
        nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };
    
    }
    
    };


public connDefaults(connector: ConnectorModel): void {
  connector.type = 'Orthogonal';
  ((connector as ConnectorModel).style as StrokeStyleModel).strokeColor = '#4d4d4d';
  ((connector as ConnectorModel).targetDecorator as DecoratorModel).shape = 'None';
};

public tool: DiagramTools = DiagramTools.ZoomPan;
public snapSettings: SnapSettingsModel = { constraints: SnapConstraints.None };
public layout: Object = {
    type: 'HierarchicalTree', horizontalSpacing: 40, verticalSpacing: 40,
    margin: { top: 10, left: 10, right: 10, bottom: 0 }
};

}




[dataSourceSettings]='objectdata' 
also 
[dataSourceSettings]='items' 

don't work
  

Vivisa Ganesan · Answer

Hi,

Query

Solution

Hi there i did so . 
   
  public data2: Object = {
     
  id: 'Id', parentId: 'ParentId', dataManager: new DataManager(this.items), //  
     
  //binds
  the external data with node
     
  doBinding: (nodeModel: NodeModel, data: DataInfo, diagram: Diagram) => {
     
      nodeModel.annotations = [{
     
          /* tslint:disable:no-string-literal */
     
          content: data['Name'], margin: { top: 10, left: 10, right: 10, bottom: 0 },
     
          style: { color: 'black' }
     
      }];
     
      /* tslint:disable:no-string-literal */
     
      nodeModel.style = { fill: '#ffeec7', strokeColor: '#f5d897', strokeWidth: 1 };
     
  }
  };
   
  Same result
  i see anything on the diagram 
  Sorry but i
  can't understand differences between your cod and mine 
   
  datasource
  is "data" ? not "items" ? well changed also it but
  nothing happens 
  dataSourceSettings]='data'

The
  binding was not proper. In the dataSourceSettings, you bound the property
  data, but you should change it as data2 to resolve your issue.

I
  did some other test 
  [dataSourceSettings]='objectdata' 
  also 
  [dataSourceSettings]='items'

In the
  last update, you mentioned that you've properly bound something, but you're
  encountering an issue. However, when we created a sample, we didn't face any
  issues. You can refer to the sample below for clarification. Could you please
  share the items that you're binding in the data so that we can validate them
  and provide you with more details? Also, please ensure that in the items, you
  have `Id` and `ParentId` as you mentioned in the object data.

Regards,VivisaAttachment: Layoutdatabinding_a64e558b.zip

Francesco Pruneri · Answer

Thx so much. i'll do any test again

Vivisa Ganesan · Answer

Hi,Thank
you for the update. We will wait to hear from you.Regards,Vivisa