JavaScript Events

ItemData object

Most rendering events receive itemData object as input parameter. The object represents the business object from the data source. It is a set of fields with values. Each field has the same name as internal name of the field in the data source.

The object has structure like this:

{
  FieldInternalName1: "FieldValue1",
  FieldInternalName2: "FieldValue2",
  ...
  FieldInternalNameN: "FieldValueN",
}

onBoxRendered(handler) event

Adds handler on box rendered event. The handler function has three input parameters:

Parameter	Description
event	It is the object of event
box	It is the object of rendered box. You can change this box, for example change background. The box object has following properties: $elem – The property stores jQuery object of the box element. You can use all methods available in jQuery to customize the box, for example css method. elem – The DOM element of the box. $elemContainer – The property stores jQuery object of the box container element. You can use this object to set width and height of the box. - elemContainer – The DOM element of the box container. The box object also provides getInnerContent function. It gets jQuery object for the inner content of current box.
itemData	It is the business object from the data source. See description at the beginning of “Events” section.

Example

//Changes background of boxes for all employees
//from marketing department
renderer.onBoxRendered(function(event, box, itemData){
  if(itemData["Department"].contains('Marketing')){
    box.$elem.css({
      'background-color': 'red',
      'border-color': 'red'
    });
  }
});

In this example Department is an internal name of the field, you can get value from the business object using such syntax:

itemData.Department

But if the internal name of your field contains − like SPS–Responsibility you need to use different syntax:

itemData["SPS-Responsibility"]

The − symbol is forbidden in JavaScript, that is why you need to get value of the field using string key.

onTooltipRendered(handler) event

Adds handler on tooltip rendered event. The handler has three input parameters:

Parameter	Description
event	the object of event.
tooltip	the object of rendered details tooltip. You can change this tooltip, for example change background. The tooltip object has following properties: $elem – The property stores jQuery object of the box element. You can use all methods available in jQuery to customize the box, for example css method. elem – The DOM element of the details tooltip.
itemData	the business object from the data source. See description at the beginning of “Events” section.

Example

//Changes background for all tooltips of employees
//from marketing department
renderer.onTooltipRendered(function(event, tooltip, itemData){
  if(itemData["Department"]contains('Marketing')){
    tooltip.$elem.css({ 'background-color': 'red' });
  }
});

onSearchResultRendered(handler) event

Adds handler on quick search result rendered event. The handler has three input parameters:

Parameter	Description
event	the object of event.
tooltip	the object of rendered details tooltip. You can change this tooltip, for example change background. The searchResult object has following properties: $elem – The property stores jQuery object of the box element. You can use all methods available in jQuery to customize the box, for example css method. elem – The DOM element of the search result.
itemData	the business object from the data source. See description at the beginning of “Events” section.

Example

//Changes background for search results of employees
//from marketing department
renderer.onSearchResultRendered(
  function(event, searchResult, itemData){
    if(itemData["Department"].contains('Marketing')){
      searchResult.$elem.css({ 'background-color': 'red' });
    }
  }
);

onInitialLoadingFinished(handler) event

Adds handler on org chart initial loading finished event. It is triggered when org chart is loaded for the first time.

Example

renderer.onInitialLoadingFinished(
  function(){
    console.log('Initial loading is finished');
  }
);

onLoadingStarted(handler) event

Adds handler on org chart loading started event. It is triggered when progress indicator is showed.

Example

renderer.onLoadingStarted(
  function(){
    console.log('Loading is started');
  }
);

onLoadingFinished(handler) event

Adds handler on org chart loading finished event. It is triggered when progress indicator is hidden.

Example

renderer.onLoadingFinished(
  function(){
    console.log('Loading is finished');
  }
);

Note

Next review Methods.