Is there a possibility to add a DropDownButton in a node of a Diagram?

[Dominique Toussaint]

I would like to know if there is a possibility to add like a DropDownButton with a hamburger icon in a node which will open a menu inside a node of a diagram? I know that there is a context menu with the right-click, but I would like a visual button to be seen. 

Best regards,

Jiway S.A.

[Shyam G]

Hi Jiway, 

 

Query	Response
I would like to know if there is a possibility to add like a DropDownButton with a hamburger icon in a node which will open a menu inside a node of a diagram	We have created a sample in which we have rendered an HTML node with dropdown menu. Please refer to a code example and sample below.    Code example:    let node1 = {    id: "node",    offsetX: 200,    offsetY: 200,    width: 160,    height: 130,    //HTML node    shape: {      type: 'HTML',      content: '<div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown button<span class="caret"/></button><ul class="dropdown-menu"><li><a rel='nofollow' href="#">HTML</a></li><li><a rel='nofollow' href="#">CSS</a></li><li><a rel='nofollow' href="#">JavaScript</a></li></ul></div>',    }  };      Sample: https://stackblitz.com/edit/react-3akpcb-skulff?file=index.js
I know that there is a context menu with the right-click, but I would like a visual button to be seen.	Could you please confirm us whether you need a custom context menu with icons?. Also, please share us more details such as screenshot of your expected context menu.

 

 

Regards, 

Shyam G 

[Dominique Toussaint]

Hi Shyam,

I tried your solution and seems to be ok, except for one thing. As you see from this screenshot:

the content of drop-down menu is always below the content of the node. I tried z-index and position: relative property to fix this but with no success. Also it really becomes the problem when the menu goes below other node as seen here:

-Any ideas on how to fix this?

Best regards,

Jiway S.A.

[Shyam G]

Hi Jiway, 

 

Query	Response
the content of drop-down menu is always below the content of the node. I tried z-index and position: relative property to fix this but with no success.	The node html content always renders behind the selector and it is an default behavior of our diagram control. In your sample, the dropdown menu is an html content, so it renders behind the selector.     We have an option to hide the node selector. Please confirm us whether it will satisfy your requirement.
Also it really becomes the problem when the menu goes below other node as seen here:	To avoid overlapping of nodes, you need to manually position the nodes based on the content. If you are using a layout, you can use layout horizontalSpacing and verticalSpacing properties to add space horizontally and vertically between the nodes.    Help documentation for layout spacing  https://ej2.syncfusion.com/react/documentation/diagram/automatic-layout/?no-cache=1#customize-layout

  

 

Regards, 

Shyam G 

[Dominique Toussaint]

Hi Shyam,

yes that would satisfy our requirement, can you give me a small sample of the code? Regarding the second response, but that wouldn't work once the user moves the node closer to the other node. There is no other way to prevent overlapping?  Also, it is not overlapping on all of the nodes, only on those who have connector between them, like shown here:

Best regards,

Jiway S.A.

[Shyam G]

Hi Jiway, 

 

Query	Response
yes that would satisfy our requirement, can you give me a small sample of the code	Please remove SelectorConstraints ResizeAll from the All constraints to achieve your requirement. Please refer to an code example and sample below.    Code example:  <DiagramComponent id="diagram"                ref={diagram => (diagramInstance = diagram)}                    selectedItems={selectedItems}              >              </DiagramComponent>    //remove the resizer elements   let selectedItems = {     constraints: SelectorConstraints.All &~SelectorConstraints.ResizeAll   }      Sample: https://stackblitz.com/edit/react-3akpcb-qvqsya?file=index.js
Regarding the second response, but that wouldn't work once the user moves the node closer to the other node. There is no other way to prevent overlapping?  Also, it is not overlapping on all of the nodes, only on those who have connector between them, like shown here:	We don’t have option to prevent overlapping of nodes on interaction. It is not a feasible feature.

 

 

Regards, 

Shyam G 

[Dominique Toussaint]

Hi Shyam,

is it possible to remove that little drawn border once the menu is opened? Which is even showing in your example when you add one more item.

Best regards,

Jiway G

[Shyam G]

Hi Jiway, 

 

Please use the below CSS to hide the border rectangle, rotateAngle and pivotLine. Please refer to the below sample for your reference. 

 

Code example: 

Index.css 

 

/* remove border rect */ 

#borderRect{ 

  visibility: hidden 

} 

 /* remove rotate handle */ 

 #rotateThumb { 

   visibility: hidden 

 } 

/* remove pivot line */ 

 #pivotLine { 

   visibility: hidden 

 } 

 

 

Sample: https://stackblitz.com/edit/react-3akpcb-nyzlcf?file=index.css 

 

Regards, 

Shyam G 

[Dominique Toussaint]

Hi Shyam G,

thanks, it worked.

Best regards,

Jiway S.A.

[Shyam G]

Hi Jiway, 

Thanks for your update. 

Regards, 

Shyam G