Available only in PRO Edition
The dimensions of items in Organogram, their arrangement and content, as well as the position of the component in relation to the container can be customized with the help of the item type.
The following properties can be set in the type to customize the whole component:
webix.ui({
view: "organogram",
autowidth: true,
...
});
webix.ui({
view: "organogram",
autoheight: true,
...
});
The appearance of Organogram items can also be changed by setting the following properties in the type parameter:
webix.ui({
view: "organogram",
type: {
lineColor: "#90caf9"
},
...
});
webix.ui({
view: "organogram",
type:{
width: 120
},
...
});
webix.ui({
view: "organogram",
type:{
height: 100
},
...
});
webix.ui({
view: "organogram",
type:{
padding: 20
},
...
});
webix.ui({
view: "organogram",
type:{
marginX: 20
},
...
});
webix.ui({
view: "organogram",
type:{
marginY: 20
},
...
});
{
template: webix.template("#value#")
}
If you want to set any other html content for some item you should redefine the template property. For example, let's set images for chart items:
var orgChart = new webix.ui({
container:"testA",
view:"organogram",
template: function(obj){
var image = obj.img;
if(image){
html = "<img src='"+image+"' class='photo'>";
}
return (image||"")+obj.value;
}
});
You can also apply a custom template to specify elements of the list. Let's mark the list items by the mark ">". To parse this sign correctly, we will set it as the ">" html character code.
var orgChart = new webix.ui({
container:"testA",
view:"organogram",
template: function(marks){
var html = "";
if(marks && marks.list_item){
html = " > ";
}
return html;
}
});
There's a possibility to make a list block inside of an item.
To create a list block, you need to specify the $type property with the value "list" in the parent of the items that you want to turn into a list.
Let's have a look at the organogram in the above picture. The items of the 4th level are united into lists.
For example, to unite the child items of the "Research" item ("Base research" and "Collaborative research with industries"), we should set the $type property with the value "list" in its definition.
The same actions should be performed with the "Development", "Teaching" and "Training" items and their child items.
The code will look like this:
var orgChart = new webix.ui({
container:"testA",
view:"organogram",
data: [
{id:"1", value:"Center Director", data:[
{ id:"1.1", value:"Research & Development", data:[
{ id:"1.1.1", value:"Research", $type: "list", data:[
{ id:"1.1.1.1", value:"Base research" },
{ id:"1.1.1.2", value:"Collaborative research with industries" }
]},
{ id:"1.1.2", value:"Development", $type: "list", data:[
{ id:"1.1.2.1", value:"Faculty development workshops" },
{ id:"1.1.2.2", value:"Student development" }
]}
]},
...
]}
]
});
By default, list items in the block are placed into a standard HTML list. To separate them visually and show their dependence on one and the same parent, define the following values within the Organogram type:
webix.ui({
view:"organogram",
type:{
listMarginX: 20,
listMarginY: 20
}
});
You can also add nested lists in the Organogram. For this, you need to apply the $type:list property both to the parent item of the list block and to its children items.
The organogram in the above image has a two-level nesting on the 3rd and 4th levels. The "Research & Development" item is the parent of the first level of nesting, while "Research" and "Development" items are the parents of the two nested list blocks.
Let's check the code:
var orgChart = new webix.ui({
container:"testA",
view:"organogram",
type:{
marginX:40,
listMarginX: 20,
listMarginY: 20
},
data: [
{id:"1", value:"Center Director", data:[
{ id:"1.1", value:"Research & Development", $type: "list", data:[
{ id:"1.1.1", value:"Research", $type: "list", data:[
{ id:"1.1.1.1", value:"- Base research" },
{ id:"1.1.1.2", value:"- Collaborative research with industries"}
]},
{ id:"1.1.2", value:"Development", $type: "list", data:[
{ id:"1.1.2.1", value:"- Faculty development workshops" },
{ id:"1.1.2.2", value:"- Student development" }
]}
]},
...
]}
]
})
To unite the child items of the "Research & Development" item, we have set the $type:list property into the related data object. Then, to add nested list blocks, we have added the $type:list property into the "Research" and "Development" data items.
Related sample: Nested List Blocks
Back to top