Object doesn't support property or method 'igGrid

As far as I can tell, I have the correct files. I copied the code from an Infragistics demo. I further checked other demo files

and the code in those files match my code.

There was no 404 error.

Below is the demo code that I am trying to run.

Any insight into resolving the “Object doesn't support property or method 'igGrid' error is appreciated.

Thank you.

<!DOCTYPE html>

<html>

<head>

<title></title>

<link href="http://cdn-na.infragistics.com/igniteui/2017.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

<link href="http://cdn-na.infragistics.com/igniteui/2017.1/latest/css/structure/infragistics.css" rel="stylesheet" />

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

<script src="http://cdn-na.infragistics.com/igniteui/2017.1/latest/js/infragistics.core.js"></script>

<script src="http://cdn-na.infragistics.com/igniteui/2017.1/latest/js/infragistics.lob.js"></script>

</head>

<body>

<table id="grid"></table>

<script src="https://www.igniteui.com/data-files/nw-products.js"></script>

<script>

$(function () {

for (var i = 0; i < northwindProducts.length; i++) {

northwindProducts[i].ImageUrl = "https://lorempixel.com/50/50/food/" + (i % 10) + "/";

}

$("#grid").igGrid({

primaryKey: "ProductID",

caption: "<span> <img src=\"//www.infragistics.com/media/441501/horz_logo.png\" alt=\"Infragistics\"></span>",

width: '100%',

columns: [

{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%", hidden: true },

{ headerText: "Image", key: "ImageUrl", dataType: "string", width: "15%", template: "<img style=\"height:50px;\" src=\"${ImageUrl}\"/>" },

{ headerText: "Product Name", key: "ProductName", dataType: "string", width: "25%" },

{ headerText: "Category", key: "CategoryName", dataType: "string", width: "25%" },

{ headerText: "Units In Stock", key: "InStock", dataType: "number", width: "35%" }

autofitLastColumn: false,

autoGenerateColumns: false,

dataSource: northwindProducts,

responseDataKey: "results",

autoCommit: true,

features: [

{

name: "Sorting",

sortingDialogContainment: "window"

{

name: "Filtering",

type: "local",

columnSettings: [

{

columnKey: "ImageUrl",

allowFiltering: false

{

columnKey: "InStock",

condition: "greaterThan"

}

]

{

name: "GroupBy",

columnSettings: [

{

columnKey: "CategoryName",

isGroupBy: true

}

]

{

name: "Selection"

{

name: "Paging",

pageSize: 10

{

name: "Resizing"

{

name: "Updating",

editMode: "dialog",

enableAddRow: false,

columnSettings: [

{

columnKey: "ImageUrl",

readOnly: false

}

]

}

]

});

</script>

</body>

</html>