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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

148939 Nov 8,2019 09:09 AM UTC Nov 19,2019 08:59 AM UTC React - EJ 2 9
loading
Tags: Diagram
Dominique Toussaint
Asked On November 8, 2019 09:09 AM UTC

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 [Syncfusion]
Replied On November 12, 2019 06:54 AM UTC


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>', 
  } 
}; 
 
 
 
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
Replied On November 12, 2019 01:41 PM UTC

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 [Syncfusion]
Replied On November 14, 2019 06:23 AM UTC

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 
 
  
 
Regards, 
Shyam G 


Dominique Toussaint
Replied On November 14, 2019 06:51 AM UTC

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 [Syncfusion]
Replied On November 15, 2019 06:06 AM UTC

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 
 } 
 
 
 
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
Replied On November 18, 2019 07:45 AM UTC

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 [Syncfusion]
Replied On November 19, 2019 08:27 AM UTC

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 
 } 
 
 
 
Regards, 
Shyam G 


Dominique Toussaint
Replied On November 19, 2019 08:34 AM UTC

Hi Shyam G,

thanks, it worked.

Best regards,
Jiway S.A.

Shyam G [Syncfusion]
Replied On November 19, 2019 08:59 AM UTC

Hi Jiway, 
Thanks for your update. 
Regards, 
Shyam G 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon