Remove image details from dialog

[PoojaSwami3010]

How i can remove img and details form node onclick popup i dont want to show imag detilas in dialog, But on node I want to show image with other details

[ZornitsaPesheva]

Here is a code example: https://code.balkan.app/org-chart-js/hide-image-hyperlink#JS

[PoojaSwami3010]

Thanks so much for the quick response. This code is working for me.

[PoojaSwami3010]

this.oganizationChart = new OrgChart(document.getElementById("tree"), { enableSearch: false, enableDragDrop: false, orientation: OrgChart.orientation.left, mouseScrool: OrgChart.none, scaleInitial: OrgChart.match.boundary, editForm: { photoBinding: "img", generateElementsFromFields: false, elements: [ { type: 'textbox', label: 'Name', binding: 'name' }, { type: 'textbox', label: 'Designation', binding: 'title' }, { type: 'textbox', label: 'Email', binding: 'Email' }, { type: 'textbox', label: 'Contact', binding: 'Contact' }, { type: 'textbox', label: 'Location', binding: 'Location' }, ] },

  nodeBinding: {
    field_0: "name",
    field_1: "title",
    img_0: "img"
  }
});

this.oganizationChart.on('redraw', function (sender) {
  debugger
  var allNodesRect: any = document.querySelectorAll('[data-n-id] rect');
  // console.log("nodes", allNodesRect)
  var allNodesRect1: any = document.querySelectorAll('rect');
  console.log("nodes 1", allNodesRect1)
  for (let i = 0; i < allNodesRect.length; i++) {
    var id = allNodesRect[i].parentElement.getAttribute('data-n-id');
    console.log("id", id)
    // var node = this.oganizationChart.get(id);
    // var fillColor = heatColour(node.value);
    if (i === 0) {
      allNodesRect[i].style.fill = "#fa896b";
    }
    else {
      allNodesRect[i].style.fill = "#0a7ea4";
    }

  }

});

this is my code i want to change node color based on 'title' or 'designation' of node how i will get node title

[ZornitsaPesheva]

Here is a code demo: https://balkan.app/OrgChartJS/Demos/ConditionalColor

[PoojaSwami3010]

thank you ,Thank you so much for quick response again. This code also works for me.

[PoojaSwami3010]

var allNodesRect: any = document.querySelectorAll('[data-n-id] rect'); for (var i = 0; i < data.length; i++) { var node = data[i]; switch (node.title) { case "HR": allNodesRect[i].style.fill = "#fa896b"; break; case "Delivery Manager": allNodesRect[i].style.fill = "#0a7ea4"; break; case "icodebaseAdmin": allNodesRect[i].style.fill = "#01c0c8"; break; case "Supervisor": allNodesRect[i].style.fill = "#763ebd"; break; } } this is my code, on click outside of treenode colors are removing and setting as default color . Please give me solution

[ZornitsaPesheva]

Please edit this example to isolate the issue: https://code.balkan.app/org-chart-js/843#JS

[PoojaSwami3010]

If i click anywhere on page outside popup , i want to close the dialog which is opening on click of node , how i can achieve that

[ZornitsaPesheva]

The details form is closing by default when you click outside. Please create a code example of what you have in our code app so we can see what is the issue: https://code.balkan.app/org-chart-js/simple-example#JS

[PoojaSwami3010]

Okay , I have created can you please check https://code.balkan.app/org-chart-js/simple-example#JS

[ZornitsaPesheva]

You need to save it and send us (post) the new link.

[PoojaSwami3010]

yeah sorry can you please check this https://code.balkan.app/testing-code#JS

[ZornitsaPesheva]

Oh, I see, you need to close it when you click outside the chart div. You can try to use chart.editUI.hide();

[PoojaSwami3010]

If i click anywhere then also it should close ,the above method is not working

[ZornitsaPesheva]

When you click in the chart div, the form is closing.

[ZornitsaPesheva]

Here is a code example: https://code.balkan.app/org-chart-js/843-1#JS

[PoojaSwami3010]

how can i change the arrow button to cross button on edit form?

[PoojaSwami3010]

Here is a code example: https://code.balkan.app/org-chart-js/843-1#JS

If I click anywhere on page I want to close the dialog this is not working

[ZornitsaPesheva]

You need to add this event on your page. It is closing on the example above. Please help me to reproduce the issue where it is not closing.

[PoojaSwami3010]

You need to add this event on your page. It is closing on the example above. Please help me to reproduce the issue where it is not closing.

not working this method if i click on testing div it's not closing, I have big page with multiple cards on it and I'm using one card for tree view https://code.balkan.app/testing-close-dialog#JS

[PoojaSwami3010]

How can i change arrow icon to cross icon in edit form

[ZornitsaPesheva]

How can i change arrow icon to cross icon in edit form

https://code.balkan.app/edit-form-close-button#JS

[PoojaSwami3010]

How can i change arrow icon to cross icon in edit form

https://code.balkan.app/edit-form-close-button#JS

this is working for me thank you so much. Best package I ever used with best team support I'm getting from your side Thank you so much.

[ZornitsaPesheva]

You need to add this event on your page. It is closing on the example above. Please help me to reproduce the issue where it is not closing.

not working this method if i click on testing div it's not closing, I have big page with multiple cards on it and I'm using one card for tree view https://code.balkan.app/testing-close-dialog#JS

You can check if a click is in the "tree" div, and close the form if it is not. The click event will be on the document

[PoojaSwami3010]

How I can remove edit form dialog from tree structure, i dont want to show that dialog , I will use my custom dialog on click node this.oganizationChart.onNodeClick((args) => { console.log('args', args.node.title, args.node.id) var node = this.oganizationChart.get(args.node.id); console.log("node in dialog", node) const dialogRef = this.dialog.open(UserDashbordInfoDilaogComponent, { width: "400px", data: ['data'], });

});
I will use something like this

[ZornitsaPesheva]

Here is the doc page on how to create custom edit/details form: https://balkan.app/OrgChartJS/Docs/Edit#custom

Here is how to open dialog on node click: https://code.balkan.app/org-chart-js/popup-on-node-click#JS

[PoojaSwami3010]

Hi, IF image path is not there then how i can add default image from some folder in project in angular code

[ZornitsaPesheva]

Here is a code demo: https://code.balkan.app/org-chart-js/default-image-on-image-error#JS