kendo jquery orgChart is not displayed as expected

1 Answer 28 Views
OrgChart
Ruth
Top achievements
Rank 1
Iron
Iron
Ruth asked on 19 May 2022, 11:57 AM

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.

 

Martin
Telerik team
commented on 24 May 2022, 07:18 AM

Hi, I have tested the provided code in this Dojo example, it appears to be working as expected. Could you check if the stylesheets are included correctly? Also, could you share the Kendo version you are using? Feel free to modify the example to demonstrate the problem.

1 Answer, 1 is accepted

Sort by
0
Ruth
Top achievements
Rank 1
Iron
Iron
answered on 24 May 2022, 10:32 AM

Hi martin,

thank you for your help.

The problem was as you wrote I had to update the _layout file to get the update css and js links.

thank you.

Tags
OrgChart
Asked by
Ruth
Top achievements
Rank 1
Iron
Iron
Answers by
Ruth
Top achievements
Rank 1
Iron
Iron
Share this question
or