Adding Swimlanes to Palette

[Gordon Brown]

Trying to add Swimlanes to a palette using angular with EJ2. Not having any success. Below is my latest attempt. This is a bit of guess as I haven't been able to find any examples of this in Angular.  Not sure

     - which properties

     - how to set these properties

export function getSwimLaneShapes(): NodeModel[] {

     const swimLaneShapes: NodeModel[] = [

          {

               id: 'Horivontal SwimLane', shape: { type: 'SwimLane', shape: 'stackCanvas1' }

          },

          {

               id: 'Vertical SwimLane', shape: {type: 'SwimLane', shape: 'stackCanvas2' }

          }

     ]

}

Thanks,

Gordon Brown

[Ramya Thirugnanam]

Hi Gordon,  

 

In your sample, you have not set lanes collection, orientation and isLane property inside a shape object, width and height. So that, the swimlane is not rendered in palette. We have modified your code example and provided below.  

 

Code example:  

  const swimLaneShapes: NodeModel[] = [  

          {  

               id: 'Horivontal SwimLane', shape: { type: 'SwimLane', lanes: [  

                        {  

                            id: 'lane1',  

                            style: { strokeColor: 'black' }, height: 60, width: 150,  

                            header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },  

                        }  

                    ], orientation: 'Horizontal', isLane: true}, width:140, height:60  

          },  

          {  

               id: 'Vertical SwimLane', shape: {type: 'SwimLane', lanes: [  

                        {  

                            id: 'lane1',  

                            style: { strokeColor: 'black' }, height: 60, width: 150,  

                            header: { width: 50, height: 50, style: { strokeColor: 'black', fontSize: 11 } },  

                        }  

                    ], orientation: 'Horizontal', isLane: true  

             }, width:60, height:140  

          }  

     ]  

 

 

 

Here is the sample in which we have shown how to add swimlane and phase to the palette.  

Sample: https://stackblitz.com/edit/angular-t5f8ke?file=app.component.ts  

 

Please find the help documentation below which shows how to add swimlane to the palette.  

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/swim-lane/?no-cache=1#add-swimlane-to-palette  

 

Here is the online angular sample  

Online sample: https://ej2.syncfusion.com/angular/demos/#/material/diagram/swimlane  

 

Regards,  

Ramya T  

[Gordon Brown]

Ramya:

Working fine now thanks.

Gordon Brown

[Ramya Thirugnanam]

Hi Gordon,   

 

Thanks for your update. 

 

Regards, 

Ramya T