Basic Primitives

Basic Primitives is a 100% JavaScript component library for building general purpose diagrams without manual nodes layout.

  • Increase font size
  • Default font size
  • Decrease font size

AngularJS Organizational Chart directive example

This example demonstrates how Organizational Chart Control can be wrapped into AngularJS directive. It demonstrates implementation of the following features:

  1. Destroy - AngularJS directoive has to destroy control otherwise its event handlers would stay bound to placeholder DOM element.
  2. Update Mode - in order to render control faster, directive should reuse existing control and use appropriate update method for changing cursor, highlight or full widget contents refresh.
  3. Events looping - directive watches for scope properties and updates widget, so we have to avoid infinite update loops when we apply changes from control back to its scope object.
  4. ItemTemplate - directive uses AngularJS templates and it shares items scopes between application and control.
  5. Buttons - by default, control uses regular HTML buttons, in case of AngularJS we have to customize item and cursor templates to use AngularJS buttons.


  

 

Comments 

 
#19 Administrator 2018-10-05 12:48
Quoting jiang:
anyone can tell me how use it in angular2?are there some examples?

No we don't have Angular examples yet. We eliminated dependency on jQuery so it shouldn't be a problem to use our controls in Angular.
Quote
 
 
#18 Administrator 2018-10-05 12:46
Quoting CDincer:
Hi,

Is it possible to add second parent to any child ?

Thank you for your time,

1. See family diagram examples for multiple inheritance use cases.
2. Organizationl diagram is based on regular hierarchical structure and supports placement of children at the same level as parent, so other regular children will have multiple parents.
Quote
 
 
#17 CDincer 2017-10-27 16:08
Hi,

Is it possible to add second parent to any child ?

Thank you for your time,
Quote
 
 
#16 jiang 2017-03-02 05:22
anyone can tell me how use it in angular2?are there some examples?
Quote
 
 
#15 Administrator 2016-09-15 07:30
Quoting Mauro8k:
Hi

I need to export this tree in .pdf or image, Can you help me with that ?

Thanks in advance

See Client side PDF generation demo.
Quote
 
 
#14 DD Naw Smith 2016-08-23 04:46
can i put in my mvc project please
Quote
 
 
#13 Administrator 2016-07-07 22:00
Quoting Mauro8k:
Hi

I need to export this tree in .pdf or image, Can you help me with that ?

Thanks in advance

If you need just an image inside PDF then look at "Print Preview and PhantomJS" sample. If you need to create editable PDF file then recommendation is to use jsPDF (MIT) project and write additional Graphics engine to support it. At the moment the widget supports Canvas, SVG, VML and plain HTML rendering modes, so it is possible to use jsPDF as an additional graphics mode to render into PDF directly on client side. Custom user templates can be rendered with jsPDF HTML to PDF support. Connectors and annotations should be rendered by that new custom graphics engine. We plan to support it, but we cannot give any estimates. We are busy with full redesign at the moment.
Quote
 
 
#12 Mauro8k 2016-07-07 15:35
Hi

I need to export this tree in .pdf or image, Can you help me with that ?

Thanks in advance
Quote
 
 
#11 Administrator 2016-07-04 06:07
Quoting Mauro8k:
it is possible to change the way to every node show in the browser?

actually every nodo when is created in on the left , I need to change to right.

Can you help me , please?

Thanks in advance.

Please, make yourself more clear. The current behaivor of the sample is exactly what you are asking for.
Quote
 
 
#10 Mauro8k 2016-06-30 16:09
it is possible to change the way to every node show in the browser?

actually every nodo when is created in on the left , I need to change to right.

Can you help me , please?

Thanks in advance.
Quote
 
 
#9 Administrator 2016-06-28 12:57
what is your recommendation. Thanks in advance
Quoting Mauro8k:
Hi I am using this code on angularjs application with single page application, when I try to navigate othe page , basic primative directive can destroy de chart from the DOM, Can you help me with the error?
is it very important to destroy it?

what is your recommendation. Thanks in advance

If you reload page completely then everything is destroyed anyway. But if you develop single page application then you have to clean jQuery UI widget's body. The way jQuery UI works, it creates custom data tag on HTML element in DOM which uniquely reference body of jQuery UI widget in its internal HASH, so if you remove DOM elements without explicit call to jQuery().remove then all bodies will stay in memory so you will experience memory leaks.
It is not clear why chart variable is not visible, so you can try to clean using jQuery(element) .remove;
It should have the same effect, it will traverse all DOM elements starting from current element and call destroy method for every jQuery UI widget found.
Quote
 
 
#8 Mauro8k 2016-06-28 12:29
Hi I am using this code on angularjs application with single page application, when I try to navigate othe page , basic primative directive can destroy de chart from the DOM, Can you help me with the error?
is it very important to destroy it?

what is your recommendation. Thanks in advance
Quote
 
 
#7 Mauro8k 2016-06-28 12:07
Hi

I am using your code in the angularjs application on single page view, when I try to navigate to other page. The browser show an error in this part : element.on('$destroy', function () {
//var scopes = itemScopes.length;
///* destroy items scopes */
//for (var index = 0; index < scopes; index++) {
// itemScopes[inde x].$destroy();
//}

///* destory jQuery UI widget instance */
//chart.remove();
});

Why is the importance to destroy the items and Jquery ui instance ?

Thank in advance
Quote
 
 
#6 Support 2015-09-24 06:39
Quoting Jorge Lopez:
Hello.

Great demo!

Is it possible to make the connectors rounded? So the lines which connect the nodes are more soft.

Thanks!

Yes, look at Connectors section of "Organizational Chart Navigation Demo". Chart supports splines, rounded corners and elbow dots for various scenarios.
Quote
 
 
#5 Jorge Lopez 2015-09-23 17:25
Hello.

Great demo!

Is it possible to make the connectors rounded? So the lines which connect the nodes are more soft.

Thanks!
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support