Swimlane make to take full diagram control

[Ahmad Nawaz]

I created Swimlane using this example. https://ej2.syncfusion.com/aspnetcore/Diagram/Swimlane#/fluent

I made diagram diagram control responsive by using following code in JavaScript.

var diagram = document.getElementById('diagram').ej2_instances[0];
diagram.height = calculatedHeight;


<div id="logicCircuit" style="width: 100%; height: 100%; min-height:700px;">
        <div id="palette-space" class="sb-palette">
            <ejs-symbolpalette id="symbolPalette" symbolHeight="80" symbolWidth="80"
                               expandMode="@ViewBag.Multiple" width="100%" height="100%"
                               palettes="ViewBag.Palette"
                               getNodeDefaults="@ViewBag.getSymbolDefaults"
                               symbolMargin="new SymbolPaletteMargin() { Left=5,Right=5,Top=5,Bottom=5}"
                               getSymbolInfo="@ViewBag.getSymbolInfo">
            </ejs-symbolpalette>
        </div>
        <div id="diagram-space" class="sb-diagram">
            <ejs-diagram id="diagram" width="100%" height="700px"
                         created="diagramCreated"
                         getNodeDefaults="@ViewBag.getNodeDefaults"
                         getConnectorDefaults="@ViewBag.getConnectorDefaults"
                         constraints="@ViewBag.Constraints"
                         nodes="@ViewBag.Nodes"
                         connectors="@ViewBag.Connectors"
                         snapSettings="@ViewBag.SnapSettings"
                         drop="drop">
            </ejs-diagram>
        </div>
    </div>

DiagramNode swimlane = new DiagramNode();
            swimlane.Id = "swimlane";
            swimlane.Width = 900;
            swimlane.Height = 600;
            swimlane.OffsetX = 450;
            swimlane.OffsetY = 300;

Which is working great.

I am facing issue while making Swimlane to take place over whole diagram with evenly distributed phased. I tried following code however it doesn't work.

var swimlane = diagram.getObject(diagram.nodes[1].parentId);
swimlane.height = calculatedHeight - 30;
swimlane.width = diagram.width;

Following i the screenshot of my Diagram

[Balasubramanian Manikandan]

You can use 'FitToPage' method to make the swimlane centre of the view-port. Refer to the below-mentioned code example and sample.

 

Code Snippet:

   function created(){

            var diagram = document.getElementById("container").ej2_instances[0];

            diagram.fitToPage();

        }

Attachment: Swimlane_(1)_(1)_61444b37.zip

[Ahmad Nawaz]

Thanks for help it improved my code. However above suggestion doesn't fulfil requirement of swimlane should take 100% of diagram available space. 

[Balasubramanian Manikandan]

You should set the diagram width and height to the swim-lane width and height to occupy 100% space in diagram. Refer to the below-mentioned sample.

Attachment: Swimlane_(2)_(1)_dbe7c550.zip