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

[devApps]

I am trying to use Kendo Grid in a view.

In the main index.html I have reference for the required css and js files:

<link href="kendo-phcc/styles/kendo.mobile.all.min.css" rel="stylesheet">
<script src="kendo-phcc/js/jquery.min.js"></script>
<script src="kendo-phcc/js/kendo.mobile.min.js"></script>

I have a list view in the main index.html and each list item refers to a separate external view which is defined in it's own html file.

In the view html file I have this :

<div data-role="view" data-init="initGrid" data-title="Restaurants" id="restaurantsView">
            <div id="grid"></div>
</div>

<script>
    function initGrid() {
        //This alert was displayed
        alert("Dummy");

                $("#grid").kendoGrid({
                    columns: [{
                        field: "Attribute",
                        title: "Attribute"
                    },
                    {
                        field: "Value",
                        title: "Value"
                    }],
                    dataSource: {
                        data: [{
                            Attribute: "Mall/Location",
                            Value: "City Center/The Mall/Pearl"
                        },
                        {
                            Attribute: "ShopName",
                            Value: "Gold Gourmet"
                        }]
                    }
                });
            };

        </script>

I have seen this forum and made sure that I made no such mistakes such as repeating jquery reference or not including required files.

StackOverflow-Reference

http://stackoverflow.com/questions/32917273/uncaught-typeerror-kendogrid-is-not-a-function

But still I have the error

Could you please help me out in this problem.

The app was created from Telerik Platform so it already had the required css and js files included.

I also tried creating a separate folder and manually adding all the required files from the Kendo UI Professional zip that I downloaded from my account.

But still I have the same issue.

I think this is a very basic question but I am just starting with kendo and Telerik so I would really appreciate your help

[devApps]

Can someone give me any pointers please ?

[Dimiter Topalov]

Hi,

In order to create the Kendo UI Grid (and other widgets) you will need a reference to the kendo.all.min.js file as well:

http://docs.telerik.com/kendo-ui/intro/installation/getting-started#add-css-and-javascript-references

You can also create a custom file, containing only the widgets and features you would like to use and reference it instead, as described in the following section of our documentation:

http://docs.telerik.com/kendo-ui/intro/installation/what-you-need#only-what-you-need

The most straightforward option for creating a custom bundle is using our Custom download builder tool:

http://www.telerik.com/download/custom-download

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[devApps]

Thanks a lot.

I have added the reference to kendo.all.min.js and the grid works fine.

[Alx]

Hi

I have the same problem, I tried to add  kendo.all.min.js but nothing's changed.

core.js:1673 ERROR TypeError: chartDiv.kendoChart is not a function

I'm trying to create  a grid using Angular 6 :

I have these lines in angular.json

"scripts": [
"./src/Added_Core/KendoNew/js/jquery.min.js",
"./src/Added_Core/KendoNew/js/kendo.all.min.js",
"./src/Added_Core/js/kendo.mobile.min.js",
"./node_modules/core-js/client/shim.js",
"./node_modules/reflect-metadata/reflect.js",
"./node_modules/lodash/lodash.js"
]

 

and in my file .TS

var dataSource = new kendo.data.DataSource({ data: seriesData || [] });  // THIS LINE WORK

this.chart = chartDiv.kendoChart({              
chartArea: {
background: "transparent",
margin: { top: 0, right: 0, bottom: 0, left: 0 }
},
plotArea: {
margin: { top: 0, right: 0, bottom: 0, left: 0 },
padding: { top: 0, right: 0, bottom: 0, left: 0 },
background: "transparent"
},
legend: {
visible: false
},
series: this.getSeriesDefinitions(),
axisDefaults: {
visible: false
},
xAxis: [
{
type: "date",
min: this.timeframe.startDate(),
max: this.timeframe.endDate(),
name: "timeAxis",
majorGridLines: {
visible: false
},
crosshair: {
visible: IS_CROSSHAIR_VISIBLE,
tooltip: {
visible: false,
template: "Ora: #= value #"
}
}
}
],
yAxis: this.yAxisList,
dataSource: dataSource,
seriesClick: this.onSeriesClick.bind(this)
}).data("kendoChart");

 

 

 

 

[Konstantin Dikov]

Hello,

For Angular 6 application it is recommended to use the Kendo UI for Angular suite:

• https://www.telerik.com/kendo-angular-ui

As for the thrown error, please ensure that "chartDiv" is a jQuery reference to the DOM element over which you want to initialize the Chart:

        <div id="chartDiv"></div>
    <script
...
            $("#chartDiv").kendoChart({

Regards,
Konstantin Dikov
Progress Telerik

[Vignesh]

Hi,

I'm working with Angular 10 application. I need some customized grid for showing data using Schema models.

So I have tried the above one. Jquery is installed once kendo-ui is also installed but still I got this error 

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

 

Kendo is not able to identified 

This is version <strong id="kendoVersion"></strong>

<script>

$(function() {

        $("#kendoVersion").text(kendo.version);

});

</script>

[Tsvetomir]

Hi Vignesh,

If the Kendo UI script references are placed after the jQuery reference, the error might be thrown. Or, the most common cause for such behavior is the double reference of the jQuery reference. In such cases, all libraries that are dependent on jQuery (the Kendo UI, in this case) are wiped away. 

Check out the troubleshooting section in our docs for more information:

https://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#widgets

If the issue persists, it would be very helpful if you could share a sample where the problem can be observed.

 

Kind regards,
Tsvetomir
Progress Telerik

[Salama]

I found the solution
If you are using jQuery Office, any version, look for the plugins file attached to your project
Which contains jQuery code and delete  the next line completely 
( !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0): )
to the end of the line
{return C.$===k&&(C.$=Jt),e&&C.jQuery===k&&(C.jQuery=Qt),k},e||(C.jQuery=C.$=k), k});

Because it will be duplicated in jQuery.js file
This is what is causing the error

[Tsvetomir]

Thank you for sharing another possible cause that might be wiping out any libraries dependent on the jQuery library.