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

Adding new items to chart at runtime

Chart is designed to update only visual elements effected by the scope of changed API options. For example on screen annotations are being rendered on top of everything, so when we make changes to on-screen annotations definitions there is no need to redraw all chart elements. The same applies to other visual elements, chart compares current copy of definitions to the new one on API and in case of any changes it triggers rendering cycle for effected scope of visual elements.

Chart does not track individual items, if we make changes in one of the items then the whole collection of items is considered to be changed, so control will layout again all items in diagram. So adding or removing individual item to items collection, does not improve rendering performance. In order to find changes in items collection widget scans all items on every refresh cycle. The chart was designed to be used in modern UI frameworks like AngularJS, so end user may change all API properties on every update, the control will check for changed properties only and make visual updates in the scope of changed properties. The point of this statement is that if we assign new items array to items property, but we make no changes to actual items, chart will not perform any layout calculations and rendering. So usage of collection bindings in Modern UI frameworks is absolutely fine.

Please, pay attention that chart does not update its visual representation on every property change and it does not make any guesses about required changes. Chart provides "update" method triggering reevaluation of API properties and rendering cycle. This "update" method is supposed to be explicitly called when all properties are set on chart's API. That means that opposite is true and it is possible to set individual chart properties one by one via sequential API calls. All these changes to API properties will not trigger any layout changes or rendering till method "update" is called.

The "update" method supports optional parameter which let you choose how you want to redraw your diagram.



Recreate - is full content reset and redraw. It is equivalent to complete chart removal and recreation. This is the most expensive update. Use it when you want to be sure that everything ware recreated from scratch.


This is above mentioned fast redraw mode, it reuses existing DOM elements in order to speed up update time and it makes visual changes only in scope of changed API properties.


It ignores any API changes except current highlight item position, it just positions highlight item, no layout recalculation or items rendering performed.


jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Recreate); /* Recreate */
jQuery("#placeholder").orgDiagram("update", primitives.orgdiagram.UpdateMode.Refresh); /* Refresh */
jQuery("#placeholder").orgDiagram("update", primitives.orgdiagram.UpdateMode.PositonHighlight); /* Highlight placement */

The following example demonstrates adding new items to organizational chart at run time, or in other words this sample does not recreate control every time we make changes to its items collection. It uses fast refresh mode to update its layout. This example adds "delete" and "add" buttons and implements onButtonClick event handler for adding and removing items. For more complex implementation of chart editing functionality see chart editor demo.




#5 Administrator 2015-01-09 00:24
Quoting smith:
When I add new items, who can I check and get the chain from current node till root back to the server

If you design your application in MVVM pattern you have to do that in your MV layer and chart just notifies you about selected item. It is not supposed to be source of your data structure.
#4 smith 2015-01-04 00:44
When I add new items, who can I check and get the chain from current node till root back to the server
#3 Administrator 2014-01-06 08:08
1. Look at demo or Organizational Chart Editor, it is based on our experience, so it assumes that user works with org chart like with regular document, so it makes all required changes and then store them in database in one transaction. It is implemented in form of jQuery UI Widget called bpOrgEditor. It has onSave event so every time user makes changes, application get notified about it. So application can store serialized copy of org chart configuration in Undo/Redo stack. It gives possibility to roll back significant user changes. Chart lets you make a lot of changes and it is important to preview results before actual changes made in database.

2. In some designs organizational chart hierarchy exists as standalone object, so user just fills in boxes describing available positions with real people. So document based approach works well in such case. So your people's database exists as separate table and org chart exists as XML document stored in blob text field in other table. So user makes modifications to org chart structure and "bulk" store them. User places people into existing org chart positions. When employee transferred from one position to another, the position itself is not transferred, but only employee is reassigned to new position. And employee gets new title according to org chart structure.

3. If you think that org chart structure is actual people table editor then yes, you need to make changes in database on every item change. The problem is that org chart allows to delete a large branch of items in one click and it does not have strategy on how reassign children of deleted item somewhere else automatically. In other words when manager is fired or moved we don't fire its direct reports or move them with him to new position.

4. In order to "bulk" save org chart as individual records I recommend to keep in memory deep copy of original data and compare changes to it onSave event

5. If you want to make changes in database on every change then the best way to do that is to create a new events like onItemChange, onItemReparent, onItemDelete, onItemAdd in bporgeditor Config and notify application about changes in hierarchy, so application can decide how it is going to store changes. But you have to account that onItemDelete - actually deletes all its sub items as well, so design should be changed as well.
#2 giri 2014-01-06 02:01
I am able to update the data to server. But the problem is before the data saved in database it reflected in UI (View) (for eg: if storing fails it should not in ui also it should not display)
#1 Jeff Phillips 2013-09-21 16:38
So how do I save the new item? (How do I write the data back to the server?)

I'm sure it's simple, but I'm missing something.

Add comment

Do you need?


Do you use?

JavaScript Frameworks

Do you use?

PDF & Image Export Support