Uncaught TypeError: $(...).kendoGrid is not a function
3 Answers 2242 Views
devApps
Top achievements
Rank 1
devApps asked on 21 Feb 2017, 10:09 AM

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

Can someone give me any pointers please ?
- by
devApps
Top achievements
Rank 1
on 23 Feb 2017, 04:38 AM

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 23 Feb 2017, 07:14 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

Thanks a lot.

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

- by
devApps
Top achievements
Rank 1
on 23 Feb 2017, 10:15 AM

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");

 

 

 

 

- by
Alx
Top achievements
Rank 1
on 05 Nov 2018, 11:31 AM
Hello,

For Angular 6 application it is recommended to use the Kendo UI for Angular suite:
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
- by
Konstantin Dikov
Telerik team
on 07 Nov 2018, 08:26 AM
0
Vignesh
Top achievements
Rank 1
answered on 30 Mar 2021, 06:57 AM

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>

0
Tsvetomir
Telerik team
answered on 31 Mar 2021, 02:39 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
devApps
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Vignesh
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or