Available only in PRO Edition
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.
In the example below, we will unite the "Base research" and "Collaborative research with industries" items into a list. For this purpose, we will set the $type property with the value "list" in their parent item called "Research".
The same actions will be performed with the "Development" value and its 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" }
]}
]},
...
]}
]
});
To add an image for an item, you should redefine the template property:
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 redefine the default styles or apply your own CSS rules for chart items.
Use the $css property in item data to specify item style in one of the two ways:
To illustrate the described techniques, we will define the .item_top CSS rule and apply it to the item of the 1st level. For the item of the second level we'll set specific CSS properties directly in the data set.
Finally, we'll redefine the .webix_selected rule to change background color of selected items.
<style>
// "top" ccs rule definition
.item_top{
background-color: #ffe0b2;
border-color: #ffcc80;
}
// the style for selected item
.webix_selected{
background-color: #2196f3 !important;
border-color: #2196f3 !important;
}
</style>
<script>
orgChart = new webix.ui({
container:"box",
view:"organogram",
data:[
{id:"root", value:"Board of Directors", $css: "item_top", data:[
{id:"1", value:"Managing Director",
$css:{background: "#ffe0b2", "border-color": "#ffcc80"}, data:[
{id:"1.1", value:"Base Manager"},
{ id:"1.2", value:"Business Development Manager"}
...
]}
]}
]
});
</script>
Related sample: Styling Organogram
Back to top