4

I am facing the issue in binding Kendo UI grid with Sharepoint List.

I am getting following error,

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

I have added scripts in the following order,

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>

UPDATE

Earlier I have asked for script editor but I have tried it in SharePoint Framework also and it is giving the same error there also.

I am using following code :

import { SPComponentLoader } from '@microsoft/sp-loader';
import 'kendo-ui-core';


export default class HelloWebArtWebPart extends BaseClientSideWebPart<IHelloWebArtWebPartProps> {

private listItemEntityTypeName: string = undefined;
public constructor() {
    super();
   // SPComponentLoader.loadScript('//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js');
   // SPComponentLoader.loadScript('//emgage21.sharepoint.com/sites/dev/Documents/kendo.all.min.js');
    SPComponentLoader.loadCss('https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css');
      SPComponentLoader.loadCss('https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css');
  }
  public render(): void { 
   this.domElement.innerHTML = `<div id="example"><input id="grid"/></div>`;

    // this.listItemEntityTypeName = undefined;
    // this.updateStatus(this.listNotConfigured() ? 'Please configure list in Web Part properties' : 'Ready');
    // this.setButtonsState();
    // this.setButtonsEventHandlers();

    this.demo();    
  }
  protected demo():void{

        $("#grid").kendoGrid({
                        dataSource: {
                            type: "odata",
                            transport: {
                                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                            },
                            pageSize: 50
                        },
                        height: 850,
                        groupable: false,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 15
                        },
                        columns: [{
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150
                        }]
                    });
                      }

}

2 Answers 2

2

You will get this error if kendo JavaScript library failed to load or if you are trying to bind before kendo file loading completes.

Please make sure your JavaScript as follows

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>

<script>
$(document).ready(function () {
    $("#grid").kendoGrid({
    ....
    });
});
</script>
4
  • I have tried the same and getting above mentioned error with this. Jun 11, 2017 at 12:51
  • Can you do CTRL + F5 your browser and see Kendo JS file is loading? Jun 11, 2017 at 14:08
  • It is loading properly... Jun 11, 2017 at 14:15
  • Just to trace your problem can you add a debugger statement in the ready function and see from the browser console if you type kendoGrid Jun 11, 2017 at 14:17
2

As I have mentioned in one of my previous answers, you need to use https://. In your current example, your kendo js is loaded via http:// . So the browser is blocking this file.

Secondly, your kendo ui file version is 2015.1.318 which is only compatible with jquery 1.10.x or 2.1.x.

Reference - JavaScript Prerequisites for Kendo UI

Thirdly, in my chrome browser, there is some certificate issue with kendo ui cdn reference https://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js,so i had to change the cdn js file reference.

So, the below code is what is present in my SEWP and its working

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2015.1.318/js/kendo.all.min.js"></script>
<div id="example"><input id="grid"/></div>
<script type="text/javascript">
$("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
            },
            pageSize: 50
        },
        height: 850,
        groupable: false,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 15
        },
        columns: [{
            field: "ContactName",
            title: "Contact Name",
            width: 200
        }, {
            field: "ContactTitle",
            title: "Contact Title"
        }, {
            field: "CompanyName",
            title: "Company Name"
        }, {
            field: "Country",
            width: 150
        }]
    });                     
</script>

Check the below screenshot:

enter image description here

Refer Kendo UI from CDN with Local Script Fallbacks

3
  • I am still getting the same error.with this code snippet also. Jun 11, 2017 at 14:14
  • Can you clear cache ? Check in & publish page ? Also try in another browser? also check and remove if there is any other jquery on the page ? i am using a blank page and its working Jun 12, 2017 at 12:25
  • This same thing working for SharePoint 2013 on premises but not working in SharePoint 365. Jun 12, 2017 at 17:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.