We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Swimlane make to take full diagram control

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

screenshot-localhost_44364-2023.01.27-22_15_06.png


3 Replies

BM Balasubramanian Manikandan Syncfusion Team January 30, 2023 04:45 PM UTC

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


AN Ahmad Nawaz January 31, 2023 05:05 PM UTC

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



BM Balasubramanian Manikandan Syncfusion Team February 1, 2023 03:41 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon