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

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

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.

9 Replies

SG Shyam G Syncfusion Team 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 



DT Dominique Toussaint 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.



SG Shyam G Syncfusion Team 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 



DT Dominique Toussaint 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.


SG Shyam G Syncfusion Team 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 



DT Dominique Toussaint 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


SG Shyam G Syncfusion Team 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 



DT Dominique Toussaint November 19, 2019 08:34 AM UTC

Hi Shyam G,

thanks, it worked.

Best regards,
Jiway S.A.


SG Shyam G Syncfusion Team November 19, 2019 08:59 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon