Please provide some example , how to manipulate locally datasource ,and change node properties on the fly

Question

Hello , trying to figure out how to manipulate datasource locally by this guide

https://ej2.syncfusion.com/angular/documentation/diagram/data-binding/#local-data

Assump my node :

export interface INode {
  stepId: string;
  meta: {title: string, color: string, selected: boolean};
  parentId: number[];
}

and i use

public layout: LayoutModel = {
  type: 'ComplexHierarchicalTree'
}

1 . Clicking on the Node , need to select it , + it connectors , + it parent Nodes programmatically ( changing it color / properties ) ?

2. How to use setNodeTemplate ?

3. What the best approach changing node properties ?

Through (selectionChange) event ?
or (click) event ?
or selectedItems ?

4. How to create 2 layers with "selected" / "unselected" data from datasource and manage it ?

5. How to CRUD datasource locally without rebuild everytime DataSourceSettings ?

6. Also it will be great to know how to do responsive diagram ?

Sivakumar Sekar · Answer

Hi Locus, 





Clicking on the Node, need to select it, + it connectors, + it parent Nodes programmatically ( changing its color / properties )  ? 

By using the nodes inEdges and OutEdges property. We can able to get the parent and child node and we can change the appearance of the node. Please refer to the below sample. 

Sample Link: https://stackblitz.com/edit/angular-rp3u9q?file=app.component.ts 





public linkedIn(): void { 
    if (this.diagram.selectedItems.nodes.length) { 
      let node: string[] = (this.diagram.selectedItems.nodes[0] as Node) 
        .inEdges; 
      for (let i: number = 0; i < node.length; i++) { 
        let index: number = this.diagram.connectors.indexOf( 
          this.diagram.nameTable[node[i]] 
        ); 
        this.highLightedObjects.push(node[i]); 
        this.diagram.connectors[index].style.strokeColor = '#1413F8'; 
        this.diagram.connectors[index].targetDecorator.style.strokeColor = 
          '#1413F8'; 
        this.diagram.connectors[index].targetDecorator.style.fill = '#1413F8'; 
        this.diagram.dataBind(); 
      } 
    } 
  } 
  


How to use setNodeTemplate ? 

We have added a setNodeTemplate  Please refer to the below sample how to use setNodeTemplate in the diagram 
https://stackblitz.com/edit/angular-i79puw?file=app.component.ts  


What the best approach changing node properties ?  

Through  (selectionChange)  event ?  
or (click) event ?  
or selectedItems ? 

We can use selection change for changing the node properties in the diagram. Please refer to the below sample and code snipper to change the node properties based on condition. 




public selectionChange(args: ISelectionChangeEventArgs): void { 
    if (args.state === 'Changed' && (args.newValue[0] as Node).data.Name === 'node12') 
    { 
      args.newValue[0].width += 100; 
    } 
  } 

https://stackblitz.com/edit/angular-i79puw?file=app.component.ts  


How to create 2 layers with "selected" / "unselected" data from datasource and manage it? 

We can able to add layers to the diagram and can able to move the required objects into the specified layers. Using the layer visible property we can able to show or hide the layer in the diagram and Please refer to the documentation link for your reference. 
Documentation Link: https://ej2.syncfusion.com/angular/documentation/diagram/layers/  


How to CRUD datasource locally without rebuild everytime DataSourceSettings  ? 

We can update the datasource locally, by modifying the existing value in the datasource. If we try to reassigning the datasource with the new data source. Then the diagram will rerender whenever the new datasource gets initialized. 


Also it will be great to know how to do responsive diagram ? 

when the viewport width goes below 550 pixels then the symbol palette will render only when clicking on the icon. We have added the sample link and a video link to demonstrate how to do a responsive diagram.  


Sample Link: https://stackblitz.com/edit/angular-i79puw?file=app.component.css  
Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/169601-933034849   



Regards, 
Sivakumar

Locus · Answer

Thank you Sivakumar for your quick reply !

Last one question , my not renders in module with lazy loading , but works perfect in app.module & app.component .

I found this example but not works for me ..

https://ej2.syncfusion.com/angular/documentation/common/how-to/lazy-loading-support/

tried bellow adapters ..

this.dataSourceSettings = {
  id: 'stepId',
  parentId: 'parentId',
  dataSource: new DataManager(dataSource),
  adaptor: new ODataAdaptor() // new Adapter () // new JsonAdaptor //
};

This is my module hierarchy

{
  path: RoutingEnum.CONFIGURATION,
  loadChildren: () => import('./configuration/configuration.module').then((m) => m.ConfigurationModule),
},

ConfigurationModule -> MainPageRoutingModule -> MainPageModule -> AppRoutingModule -> AppModule

import {WorkflowTransitionDiagramComponent} from './components/workflow-transition-diagram/workflow-transition-diagram.component';
import {DiagramModule} from '@syncfusion/ej2-angular-diagrams';

@NgModule({
  imports: [
    CommonModule,
    ConfigurationRoutingModule,
    LvMapModule,
    FormsModule,
    LvFormModule,
    MatTabsModule,
    ShareModule.forRoot(),
    MessageModule,
    MatMenuModule,
    MatDialogModule,
    MatCheckboxModule,
    MatTooltipModule,
    MatListModule,
    ClipboardModule,
    FormsModule,
    ReactiveFormsModule,
    MatIconModule,
    DragDropModule,
    InfraModule,
    DiagramModule,
    FormlyModule.forChild(FORMLY_CUSTOM_CONFIG),
    MatExpansionModule,
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  declarations: [
    ConfigurationComponent,
    ModulesMappingComponent,
    ConfigurationJointsComponent,
    ModulesLocateComponent,
    ConfigurationFormsComponent,
    ModulesPressureTestComponent,
    ConfigurationProjectComponent,
    ConfigurationAssetsComponent,
    GisGridWithFullScreenComponent,
    GridWithFullScreenComponent,
    AlertTypeListComponent,
    AlertTypeEditorComponent,
    AlertTypeListCardComponent,
    AlertTypeEditorCriterionComponent,
    AlertTypeEditorCardComponent,
    ConnectGISLayerComponent,
    ConfigurationWorkUnitComponent,
    ReconciliationComponent,
    ReconListComponent,
    ReconEditorComponent,
    OqVendorsComponent,
    OqComponent,
    OqTasksComponent,
    OqTaskEditorComponent,
    SystemMappingComponent,
    ConfigurationTestComponent,
    MainSharedContentComponent,
    LiveListsComponent,
    LiveListEditorComponent,
    FieldsTagsComponent,
    FieldsTagsEditorComponent,
    SharedListPreviewComponent,
    SharedListEditorComponent,
    ConfigurationVersionManagerComponent,
    DashboardsComponent,
    DashboardsEditorComponent,
    DashboardsEditorFieldComponent,
    DashboardsEditorCardComponent,
    DashboardsEditorFieldRepeaterComponent,
    WorkflowStepsComponent,
    WorkflowStepEditorComponent,
    WorkflowsComponent,
    WorkflowEditorComponent,
    WorkflowTransitionEditorComponent,
    WorkflowTransitionEditorDialogComponent,
    WorkflowTransitionDiagramComponent
  ],
  exports: [ModulesMappingComponent, ConfigurationComponent],
  providers: [
    ConfigurationService,
    SystemMappingGuard,
    GisGuard,
    {
      provide: MAT_RIPPLE_GLOBAL_OPTIONS,
      useValue: {
        disabled: true,
      },
    },
    AlertsService,
    {
      provide: FORMLY_CONFIG,
      multi: true,
      useFactory: registerTranslateExtension,
      deps: [TranslateService],
    },
  ],
  entryComponents: [ConfigurationTestComponent],
})
export class ConfigurationModule {
}

Whats the thing i'm missing ?

Thank you again :) .

Sivakumar Sekar · Answer

Hi Locus, 

   We cannot able to reproduce the reported issue at our end. So please share with us more details about the issue i.e. provide a simple sample with replication steps or a video demonstration of the reported issue. This will be helpful to use to serve you better. 

Regards,  
Sivakumar

Locus · Answer

Hi again ! Please provide me example for ...

<ej-diagram [dataSourceSettings]></ej-diagram>

&

dataSourceSettings - i'm using locally JSON data binding

&

with Lazy loading Angular Component ( example-diagram.component.ts => example-diagram.module.ts )

that exist under app.module.ts

{
  path: 'example-diagram',
  loadChildren: () => import('./example-diagram.module').then((m) => m.ExampleDiagramModule),
}

Sivakumar Sekar · Answer

Hi Locus, 

We have added the sample link to demonstrate how to load the diagram with lazy loading. While loading the diagram with Lazy loading, we didn`t face any issues.  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Angular-LazyLoading1961636869  

If we misunderstood your requirement, please share more details that are a video demonstration of your requirement or replicate the issue in the above shared sample. This will be helpful for us to proceed further. 

Regards, 
Sivakumar