How do add nice popup custom control to show a form on shape click

[Amit K Lohogaonkar]

How do add nice popup custom control to show a form on shape/node click and then in that poup form user can select start and end dates and few dropdowns like(monthly/yealrly/weekly) and one text box and that data needs to come back into shape/node text. This is ej2 javascript jquery based.

[Gowtham Gunashekar]

Hi Amit,  

  

We have added a sample link, in it when click on the node a popup will open, if we select yes in the first popup ,second popup will open, the second popup has multiple check box and two text box, if users select some option and click yes means the selecte data stroed in the addinfo property of the node 

 

Code snippet: 

document.getElementById("ok").onclick = function() { 

  var node = diagram.selectedItems.nodes[0]; 

  node.addInfo = [{ Day: day, StartTime: startTime, endTime: endTime }]; 

  diagram.dataBind(); 

  templateDialog.hide(); 

}; 

 

Sample link: https://stackblitz.com/edit/ndzfuk 

  

Regards,   

Gowtham  

 

[Amit K Lohogaonkar]

great! Thanks. I want this poup on userhandles

https://ej2.syncfusion.com/javascript/demos/#/material/diagram/quick-commands.html

[Amit K Lohogaonkar]

I was able to make it work in userhandles but one issue in your sample is for all nodes its taking same date. I need seperate dates for each node, for one action it may be friday and for one its monday etc..

[Amit K Lohogaonkar]

One issue with userhandles is it adds it to arrows as well... How do I add it only to node shapes?

[Gowtham Gunashekar]

Hi Amit, 

 

 We have added a sample to demonstrate how to change the day radio button’s checked value before the dialog box shown and how to restrict the user handle for the connectors. 

 

Code snippet: 

function getTool(action) { 

  var tool; 

  if (action === "clone") { 

// set the day value before dialog box open using selected node id 

    if ( 

      diagram.selectedItems.nodes[0].id === "sdlc" || 

      diagram.selectedItems.nodes[0].id === "support" 

    ) { 

      document.getElementById("monday").ej2_instances[0].checked = true; 

    } else { 

      document.getElementById("sunday").ej2_instances[0].checked = true; 

    } 

    dialogObj.show(); 

  } 

  return tool; 

} 

 

 

function click(args) { 

  if (args.element.inEdges) { 

// show the userhandle when select the connector  

 

    diagram.selectedItems.userHandles[0].visible = true; 

  } else { 

// hide the userhandle when select the connector  

    diagram.selectedItems.userHandles[0].visible = false; 

  } 

} 

 

 

Sample link: https://stackblitz.com/edit/ndzfuk-pbof3b?file=index.js 

 

 

Regards, 

Gowtham .