Uncaught TypeError: $(...).kendoTreeList is not a function

1 Answer 398 Views
TreeList
Kok Ho
Top achievements
Rank 1
Kok Ho asked on 20 Jan 2023, 02:41 AM | edited on 20 Jan 2023, 02:57 AM

Currently I'm develop hierarchy char by using Kendo UI Treelist feature. Below is my snipe code

in my .aspx file "

I include those scripting in header

<script type="text/javascript" src="../Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../Scripts/kendo/kendo.all.min.js"></script>

in my javascript (datasource is i load from my own data)

var wbsDataSource =

    [{
        ID: "1",
        Description: "Kick Off",
        Parent: null
    }, {
        ID: "2",
        Description: "Meeting",
        Parent: "1"
    }
]

var dataSource = new kendo.data.TreeListDataSource({
    data: wbsDataSource,
    schema: {
        model: {
            id: "ID",
            parentId: "Parent",
            fields: {
                Parent: {
                    field: "Parent",
                    nullable: true
                },
                ID: {
                    field: "ID",
                    type: "number"
                }
            },
            expanded: true
        }
    }
});

$("#treelist").kendoTreeList({
    dataSource: dataSource,
    height: 800,
    editable: {
        move: {
            reorderable: true
        }
    },
    columns: [{
            field: "Description",
            title: "Description",
            width: 280,
        }
    ]

});


however when i run the code above it throw me error "Uncaught TypeError: $(...).kendoTreeList is not a function"

it will only work when I change my html header into code below (JavaScript remain the same), especially with using the base HREF

<base href="https://demos.telerik.com/kendo-ui/treelist/dragdrop">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>

1 Answer, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 24 Jan 2023, 03:52 PM

Hello, Kok Ho,

Could you please tell me the version you are using in the non-working case? Such an error occurs when you are using an older Kendo version in which the component in question is not yet introduced. Another reason might be if you are loading jQuery after the Kendo script or if you are loading Kendo twice.

If the above information does not help you to resolve the problem, please provide a small runnable example where I can observe it, and I will be happy to help.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Kok Ho
Top achievements
Rank 1
commented on 26 Jan 2023, 01:04 AM

Hi Martin,

Thanks for your explanation regarding to this "Another reason might be if you are loading jQuery after the Kendo script or if you are loading Kendo twice." After checking on my code based on this statement I found out that my placement of kendo.js file itself in the wrong place that cause it was not being able to load accordingly. For now I think the error that I receive is solve.

 

Tags
TreeList
Asked by
Kok Ho
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or