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

Cursor Item & Mouse click

Organization Chart widget has API options equivalent to regular UI controls. The cursor item is used to select single item in hierarchy with mouse click, highlight item provides visual feed back on mouse over. Selected items collection is equivalent to checked items in ListView or TreeView controls.

Chart's API is a hierarchy of objects. In order to select, highlight or navigate to one of them we have to reference them on API, for that purpose we use unique items ids.  In case of chart cursor navigation we assign cursor item id to primitives.orgdiagram.Config.cursorItem property.

Chart navigation depends on current cursor item, chart shows all parents of cursor item up to the root, its immediate children and siblings in full size mode, all other items can be folded into dots depending on available space. So cursor item plays a role of local zoom in the chart hierarchy. User navigates around chart via clicking and moving cursor item around and zooming into data around new cursor item.

In order to avoid complete chart recreation on every click, widget has fast redraw mode, it is invoked by "update" method having its argument set to primitives.orgdiagram.UpdateMode.Refresh. See "Adding new items to chart at runtime" use case for more details.

The following example shows how to set cursor item programmatically and listen to notifications about users navigation in chart with primitives.orgdiagram.Config.onCursorChange event. It is coupled with preceding primitives.orgdiagram.Config.onCursorChanging event, which can be used in web applications to make server post backs without simultaneous unnecessary layout updates. See reference for cancel property of onCursorChanging event argument.

If you want to avoid chart navigation and update before server update use following code snippet:

options.cursorItem = null;
options.onCursorChanging = function (e, data) {
       data.cancel = true; /* cancel folloing onCursorChanged event */
};

If you need to disable mouse click for some item use isActive option of item and template configs. See "Inactive items" use case.

If you need to disable completly mouse interactivity in Widget you have to set cursorItem and highlightItem options into null and set navigationMode option into primitives.common.NavigationMode.Inactive

Keyboard navigation

The widget is keyboard focusable. So when it gets focus with TAB or mouse click there is blue "outline" around it indicating keyboard focus. The widget supports keyboard arrows to select highlighted item and "enter" to set cursor. So when control gets focus user has to use arrows to highlight item and then press enter to set cursor to it.

Take into account that item template may contain HTML elements supporting keyboard focus and keyboard commands.

  

 

Comments 

 
#14 Administrator 2018-09-25 06:20
Quoting Nikki:
Hi,
I just wanted to highlight a particular node on certain action.
How can we directly select the child item, when there are more than 500 nodes? What value do we need to provide for 'cursorItem', as its 0/1/2 in the above explanation. Is there any possible way? Kindly help.

Nodes in items collection must have id property, so it is used as a soft link value across all API elements.
Quote
 
 
#13 Nikki 2018-09-25 05:50
Hi,
I just wanted to highlight a particular node on certain action.
How can we directly select the child item, when there are more than 500 nodes? What value do we need to provide for 'cursorItem', as its 0/1/2 in the above explanation. Is there any possible way? Kindly help.
Quote
 
 
#12 Administrator 2017-08-07 11:07
Quoting jose654:
How about if i want to hide the siblings of the selected item? what function or atribute should i use?

Just delete them from items collection and refresh. Control supports hidden items, but they are supposed to be used for complex layout scenarios.
Quote
 
 
#11 jose654 2017-08-07 10:26
How about if i want to hide the siblings of the selected item? what function or atribute should i use?
Quote
 
 
#10 Administrator 2016-08-05 06:00
Quoting Alagar:
Hi,
In Org Tree,I am trying to trigger a function when user clicks on the node by onCursorChanged function.But It isn't working, If node is selected(Cursor Item) isn't calling function. Can please tell any other function to trigger that event.?

Yes, on cursor changed is called when current cursor item is changed, so when you click cursor item second time it is not changed and event is not called.
Look at "Adding link to item template", you can bind your own event handler to any html element of the item.

The other approach is to handle onMouseClick event. It has two arguments. The first one is original event handler and the second one is widget specific, see primitives.orgdiagram.EventArgs type , it gives you reference to clicked ItemConfig "context" and clicked item "position", so you can verify that original event click was inside items boundaries.
Quote
 
 
#9 Alagar 2016-08-05 05:11
Hi,
In Org Tree,I am trying to trigger a function when user clicks on the node by onCursorChanged function.But It isn't working, If node is selected(Cursor Item) isn't calling function. Can please tell any other function to trigger that event.?
Quote
 
 
#8 Administrator 2016-01-29 10:53
See Adding link to item templateQuoting Luca Nalli:
Hi I've set up the code to go to a page after clicking an item and it works ok, the problem is that also clicking outsite the items it brings you to some link, it seems that item box extends beyond the item itself. How to avoid this behaviour?

options.onMouseClick = function (e, data) {

if ( data.context.url != '' ) {
var pURL = data.context.url + data.context.urlKey + '&WindowName=' + window.top.name;
newWindowTempor ary(pURL);
}
};

See Adding link to item template.
Quote
 
 
#7 Luca Nalli 2016-01-29 10:36
Hi I've set up the code to go to a page after clicking an item and it works ok, the problem is that also clicking outsite the items it brings you to some link, it seems that item box extends beyond the item itself. How to avoid this behaviour?

options.onMouseClick = function (e, data) {

if ( data.context.url != '' ) {
var pURL = data.context.url + data.context.urlKey + '&WindowName=' + window.top.name;
newWindowTempor ary(pURL);
}
};
Quote
 
 
#6 vinodh kanna 2015-03-19 20:14
I have used var data=[{ }], to push all the values in an array from a DB, how to retreive those values once I change the node positions(inter change of child elements) at client side to update again in DB? Appreciate your help!
Quote
 
 
#5 Administrator 2014-06-30 06:29
Quoting Ram Sunder:
I will clearly explain my situation here. I have a site which has project details. In that project we will displaying we will be displaying the VP's, AVP's, Managers, etc.. If click on Manager name it should go the that level in Org Chart. Is that possible?

Hello Ram

Look at following demo, it has what you need:
http://www.basicprimitives.com/index.php?option=com_local&view=local&Itemid=73&lang=en
Quote
 
 
#4 Administrator 2014-06-18 06:28
Quoting Ram Sunder:
Quoting Administrator:
Quoting Ram Sunder:
How can we directly select the child item (eg: C here) initially?

jQuery("#basicdiagram").orgDiagram({ cursorItem: 2 });
jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Refresh);


What if we have some 100 items in the chart with so many childs and so many parents... how can we identify the cursor item in that situation?

It is not clear what you mean, but if we consider MVVM pattern you should have VM (ViewModel) so Cursor Item is supposed to be Property on VM, so you have to Bind that property the Chart Widget cursor property. The chart is supposed to be one of the controls in View, so in order to avoid numerous updates on every property change you have to explicitly call "update" method. So you are supposed to make changes to Cursor property of ViewModel and then propagate changes via bindings to the Chart. So if you need to search for some item you have to do that on Model, not on chart. Chart is only notifying you via events about user actions.
Quote
 
 
#3 Ram Sunder 2014-06-18 00:15
Quoting Administrator:
Quoting Ram Sunder:
How can we directly select the child item (eg: C here) initially?

jQuery("#basicdiagram").orgDiagram({ cursorItem: 2 });
jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Refresh);


What if we have some 100 items in the chart with so many childs and so many parents... how can we identify the cursor item in that situation?
Quote
 
 
#2 Administrator 2014-06-17 06:31
Quoting Ram Sunder:
How can we directly select the child item (eg: C here) initially?

jQuery("#basicdiagram").orgDiagram({ cursorItem: 2 });
jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Refresh);
Quote
 
 
#1 Ram Sunder 2014-06-17 03:50
How can we directly select the child item (eg: C here) initially?
Quote
 

Add comment


Do you need?

Diagrams
 

Do you use?

JavaScript Frameworks
 

Do you use?

PDF & Image Export Support