or
1 answer
78 views
Hi there, can you please tell me if this is a bug? or if I'm doing something wrong.
I get this error when I try to read 2000 records in from API, it says "Maximum call stack size exceeded". The response is retrieved but when the results are not showing in the Org Chart. They do show when I read 1000 records.
Neli
Telerik team
answered
on
27 Feb 2024
1 answer
42 views
Using the Kendo UI Dojo, I have the code seen at the bottom. There are also two screenshots.
If you run this, you will find that the child elements are widely spaced apart even though their own content is small. If I change the value of item ID 1 to 10 characters, the spacing shrinks to reasonable distances (see screenshots below). I don't understand why the parent width should affect the child widths. Is there any way for me to correct this?
Thank you,
Tom Clark
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/orgchart/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="https://kendo.cdn.telerik.com/themes/7.0.2/default/default-main.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>
<style>
.k-card {
border: none !important;
background-color: inherit !important;
}
.k-orgchart-card {
width: auto !important;
}
.k-orgchart-node-group-container {
padding: 0 !important;
}
.k-button {
cursor: default !important;
outline: none !important;
}
.k-orgchart-line-v, .k-orgchart-line-h {
color: #000000 !important;
}
.org-chart-item {
padding: 10px 15px 10px 15px !important;
white-space: nowrap !important;
font-size: 12px !important;
}
</style>
</head>
<body>
<div id="example">
<div id="orgchart"></div>
<script>
var data = [
{ id: 1, name: "123456789012345678901234567890", expanded: true },
{ id: 2, name: "Clevey Thrustfield", parentId: 1 },
{ id: 3, name: "Carol Baker", parentId: 1 },
{ id: 4, name: "Kendra Howell",parentId: 1 },
{ id: 5, name: "Sean Rusell",parentId: 1 },
{ id: 6, name: "Steven North", parentId: 1 },
{ id: 7, name: "Frank Furter", parentId: 1 }
];
$("#orgchart").kendoOrgChart({
dataSource: data,
collapse: function (e) { e.preventDefault(); },
editable: false,
groupField: "name",
groupHeaderTemplate: "",
template: `<div class="org-chart-item">#: name #</div>`
});
</script>
</div>
</body>
</html>
DISPLAY WHEN PARENT WIDTH IS LARGE:
DISPLAY WHEN PARENT WIDTH IS SMALL:
Neli
Telerik team
answered
on
22 Jan 2024
1 answer
56 views
Is there a way to allow users to create new entries for an empty OrgChart? We're looking at adding this widget as a means of allowing our users to create their own organizational charts. This necessarily means that the charts will start as empty - there will be no data in them to begin with. And it seems like this is unintended behavior for the widget? The only way I can find to allow for the creation of an entry into the chart is to forcibly have a fake dummy record from which the "Create" action can be invoked. An empty chart doesn't have a toolbar at all. I'd create my own toolbar, but I cannot find anything in the API that allows me to invoke the create modal via JS.
We're using the JQuery version of Kendo UI. Thanks.
Martin
Telerik team
answered
on
18 Apr 2023
1 answer
131 views
My requirement is to create a diagram which is using different widgets to child and parent nodes. Is there a way to use two or more different custom templates for parent and its child nodes. Please see the image below that is something I want to create
1 answer
78 views
Need Source code Below Format Kendo Chart with in the Angular
Present below is jQuery, but instead of jQuery using angular support source code
https://docs.telerik.com/kendo-ui/knowledge-base/display-time-on-value-axis#solution
Please find the reference image
Nikolay
Telerik team
answered
on
01 Feb 2023
3 answers
60 views
hi,
I am trying to implement the following example
https://docs.telerik.com/kendo-ui/api/javascript/ui/orgchart/configuration/editable.fields
But it doesn't seem to work even on the website
Am I right?
I expect that after the implementation I will not be able to edit the fields shown in the edit popup.
Lyuboslav
Telerik team
answered
on
24 Oct 2022
1 answer
134 views
I Have 71 Records in the array list, When I Pass That Array To Kendo Org Chart It Takes Too Time To load
Neli
Telerik team
answered
on
07 Sep 2022
1 answer
177 views
Hi, I'm working with the Kendo jQuery OrgChart widget and for some reason it is blowing up to a huge size and I haven't had any luck adjusting it. Here is a dojo of the data I'm working with (https://dojo.telerik.com/ibiniBuW). It doesn't seem to have many more nodes than the demos but it automatically takes up a huge amount of space. The dimensions seem to default to height: 2413px and width: 10399px no matter the size of the parent div.
I have tried resizing the div itself and then using styling on the k-orgchart-container class and neither method changed anything. I have also tried setting height, width, and chartArea from within the widget and none of those changes made any difference either.
Any help would be much appreciated, thanks!
Lyuboslav
Telerik team
answered
on
18 Jul 2022
1 answer
187 views
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
1 answer
226 views
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.
