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,
...
});
webix.ui({
view: "organogram",
lineColor: "#90caf9",
...
});
The appearance of Organogram items can also be changed by setting the following properties in the type parameter:
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 a ">" 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 "Traning" 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" }
]}
]},
...
]}
]
});
Back to top