Syncfusion ejGrid not displaying (uncaught reference and uncaught type error)

Question

I have recently been introduced to syncfusion and I am trying to use their basic grid feature.

I have html code as show in the fiddle and a separate js file called orders which contains:

        $("#Grid").ejGrid({           

        columns: [

            { field: "Order", headerText: "Order ID", width: 75, textAlign: ej.TextAlign.Right },

            { field: "CustomerID", headerText: "Customer ID", width: 80 },

            { field: "ShipName", headerText: "Ship Name", width: 100 },

            { field: "ShipCity", headerText: "Ship City", width: 100 },

            { field: "Freight", width: 80, format: "{0:C3}", textAlign: ej.TextAlign.Right }

        ]

    });

Basically, I'm trying to get a table to display in Section 3 but keep on getting this error:

jquery.easing.min.js:44 Uncaught ReferenceError: jQuery is not defined jquery.easing.min.js:44(anonymous function)

ej.web.all-latest.min.js:10 Uncaught TypeError: Cannot read property 'extend' of undefined ej.web.all-latest.min.js:10(anonymous function) ej.web.all-latest.min.js:10(anonymous function)

orders.js:30 Uncaught TypeError: undefined is not a function orders.js:30(anonymous function)

I've tried using the js directly as a script tag within html but that doesn't work. I've also tried wrapping it in a document.ready function but to no avail.

JsFiddle example http://jsfiddle.net/Ld6mn6xb/

Answer 1

In the fiddle, you have referred the jquery easing before jquery and hence the issue occurred and also remove multiple jquery files.

Please find the working fiddle here

JSFiddle

And also refer the below help link for getting started with Syncfusion ejGrid.

ejGrid help

For now in the above fiddle, i have provided empty data to the grid since order.js file is not found in the fiddle.