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

How to resize swimlane when initially dropped


I would like to resize a swimlane once dropped to fill most of the width of the page.
I have tried the following in the dragEnter event:

if (args.element && args.element.isLane) {
    var node = args.element;
    if (node.orientation === "horizontal") {
        node.minWidth = 1350;
        node.minHeight = 120;

This works, but requires the user to move the shape right to the middle of the diagram before dropping - otherwise, it disappears.

If I change the above to have a minWidth of 400, and then try and change the width in the dropHandler event, nothing happens.  Similarly, trying the same thing in the nodeCollectionChange handler does nothing as well.

Ideally I would like to do the following once a new swimlane is dropped:

Make the swimlane width = 1350

I've tried the following in the dropHandler code:

if (args.element && args.element.isLane) {
    var node = args.element;
    if (node.orientation === "horizontal") {
        node.minWidth = 1350;
        node.minHeight = 120;
        node.offsetX = 5 + (node.minWidth / 2);
        //diagram.updateNode(node.name, { minWidth: 1350, minHeight: 120, offsetX: 5 + (1350 / 2) });
    } else {
As you can see, I've tried using diagram.updateNode but with no luck either.

How should I go about making this work.



1 Reply

SG Shyam G Syncfusion Team January 5, 2017 01:01 PM UTC

Hi Jim, 

We suspect that you have set an boundaryConstraints to an diagram. If yes, the element can be dropped within the boundary area and the element disappears if we drop the element outside of the page boundary area. Also the drop and nodeCollectionChange event will not be triggered when the element is place outside of the page boundary area. This is a default behaviour of our diagram control. Please refer to the below video for more details. 

Shyam G 

Live Chat Icon For mobile
Up arrow icon