How to implement show/hide HTML template content on node click in React Diagram?

The Syncfusion® React Diagram control offers support for rendering HTML template content on nodes, enabling seamless integration of dynamic content. In this article, we will demonstrate rendering multiple contents within a single HTML node and adjusting their visibility upon clicking the node.

Rendering HTML Template Nodes in Syncfusion® Diagram:

HTML elements can be incorporated into the diagram using the HTML-type node. The shape property of the node enables you to specify the type of node. The following code exemplifies the creation of an HTML node with a template.

 function nodeTemplate(data) {
   return (
     <div id="parent" onClick={showHide}>
       <p>Accounting Document Fact</p>
       <hr id="line" style={{ visibility: 'hidden' }} />
       <div
         id="Sub_Child"
         style={{
           width: '50%',
           height: '75%',
           marginRight: '20px',
           visibility: 'hidden',
         }}
       >
         <p style={{ whiteSpace: 'nowrap' }}>Billing Type Code</p>
         <p style={{ whiteSpace: 'nowrap' }}>Billing Type</p>
         <p style={{ whiteSpace: 'nowrap' }}>Billing Description</p>
       </div>
     </div>
   );
 } 

 return (
   <div className="control-pane">
     <style>{SAMPLE_CSS}</style>
     <div className="col-lg-8 control-section">
       <div className="content-wrapper" style={{ width: '100%' }}>
         <DiagramComponent
           id="diagram"
           ref={(diagram) => (diagramInstance = diagram)}
           width={'100%'}
           height={'645px'}
           nodes={nodes}
           nodeTemplate={nodeTemplate}
         >
           <Inject services={[UndoRedo]} />
         </DiagramComponent>
       </div>
     </div>
   </div>
 ); 

We have implemented the functionality to show/hide the HTML template content based on a node click.

 function showHide() {
   const selectedNode = diagramInstance.selectedItems.nodes[0];

   if (selectedNode) {
     const element = document.getElementById('Sub_Child');
     const pElement = document.getElementById('parent');
     const line = document.getElementById('line');

     if (selectedNode.addInfo[0].show === 'Hide') {
       element.style.visibility = 'visible';
       line.style.visibility = 'visible';
       pElement.style.height = '133px';
       selectedNode.height = 133;
       selectedNode.offsetY = 250;
       selectedNode.addInfo[0].show = 'Visible';
     } else {
       pElement.style.height = '30px';
       element.style.visibility = 'hidden';
       line.style.visibility = 'hidden';
       selectedNode.height = 30;
       selectedNode.offsetY = 200;
       selectedNode.addInfo[0].show = 'Hide';
     }

     diagramInstance.dataBind();
   }
 } 

Here the showHide method is triggered when the parent div is clicked. It checks the visibility state of an inner div named ‘Sub_Child’ and toggles its visibility along with associated elements such as ‘parent’ and ‘line’. The method dynamically adjusts the height and offset properties of the selected node based on its current visibility state, providing a simple way to show or hide HTML template content on node click. Refer the following sample for more information.

Sample:

Click here for sample

Conclusion

I hope you enjoyed learning about how to implement show/hide HTML template content on node click in React Diagram.

You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentations. You can also explore our React Diagram example to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our React Diagram and other components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!