Hi there,
we want to build a dynamic, clickable OrgChart of our organisation to filter the employees by organizational unit depending on the center clicked.
I think this might work with the OrgChart component, but is it possible to export the OrgChart to pdf or jpeg?
kind regards
Simon
Hello,
I try to use jquery orgChart as in the kendo example below :
https://demos.telerik.com/kendo-ui/orgchart/index
This is the html kendo code, I just changed the source of the image:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<img src="/img/bi15.png" />
<div id="example">
<div id="orgchart"></div>
<script>
var data = [
{ id: 1, name: "Gevin Bell", title: "CEO", expanded: true, avatar: "/img/bi15.png" },
{ id: 2, name: "Clevey Thrustfield", title: "COO", expanded: true, parentId: 1, avatar: "/img/bi15.png" },
{ id: 3, name: "Carol Baker", title: "CFO", expanded: false, parentId: 1, avatar: "/img/bi15.png" },
{ id: 4, name: "Kendra Howell", title: "CMO", expanded: false, parentId: 1, avatar: "/img/bi15.png" },
{ id: 5, name: "Sean Rusell", title: "Financial Manager", expanded: true, parentId: 3, avatar: "/img/bi15.png" },
{ id: 6, name: "Steven North", title: "Senior Manager", expanded: false, parentId: 3, avatar: "/img/bi15.png" },
{ id: 7, name: "Michelle Hudson", title: "Operations Manager", expanded: true, parentId: 2, avatar: "/img/bi15.png" },
{ id: 8, name: "Andrew Berry", title: "Team Lead", parentId: 5, avatar: "/img/bi15.png" },
{ id: 9, name: "Jake Miller", title: "Junior Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 10, name: "Austin Piper", title: "Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 11, name: "Dilyana Newman", title: "Accountant", parentId: 5, avatar: "/img/bi15.png" },
{ id: 12, name: "Eva Andrews", title: "Team Lead", parentId: 6, avatar: "/img/bi15.png" },
{ id: 13, name: "Kaya Nilsen", title: "Financial Specialist", parentId: 6, avatar: "/img/bi15.png" },
{ id: 14, name: "Elena Austin", title: "Team Lead", parentId: 4, avatar: "/img/bi15.png"},
{ id: 15, name: "Lora Samuels", title: "Lawyer", parentId: 4, avatar: "/img/bi15.png"},
{ id: 16, name: "Lillian Carr", title: "Operator", parentId: 7, avatar: "/img/bi15.png" },
{ id: 17, name: "David Henderson", title: "Team Lead", parentId: 7, avatar: "/img/bi15.png" }
];
$("#orgchart").kendoOrgChart({
dataSource: data
});
</script>
</div>
</body>
</html>
but the result is not displayed as expected hierarchy and it doesn't look like a tree.
am I missing something?
my result:
expected result:
Thanks in advance.
Hi
I am trying to load the OrgChart in jquery using the example provided in documentation but for some reason whenever it tries to load the datasource by invoking the control kendoOrgchart method it gives the error:
Im referencing the below files in my project.
Get the error on below line:
Please advise what could be the problem.
Thanks