Contents
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",
}
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
You can use this object to set width and height of the box. - elemContainer – The DOM element of the box container. The |
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.
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
|
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' });
}
});
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
|
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' });
}
}
);
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');
}
);
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');
}
);
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.