.igGrid is not a function

I have a simple sample that i copied from the infragistics site,    how to bind HTML into a HTML Table:

i create a web app in my visual studio, and try to run it, when i tried i got this error from my Browser:

.igGrid is not a function.

Hello Pablo,

This error appears when there are missing references.

Those are the CDNs for the combined js files:

<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script&gt;
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script&gt;

To refer to the grid only use this file:

http://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.ui.grid.framework.js

You can also take a look at this topic

Hi,

I am trying your suggestion but project still does not recognize the script. Could you please give a complete asp.net mvc sample? Because i can not handle in MVC project.

Uncaught TypeError: $(…).igGrid is not a function

at HTMLDocument. ((index):117)
at fire (jquery-1.10.2.js:3062)
at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)
at Function.ready (jquery-1.10.2.js:447)
at HTMLDocument.completed (jquery-1.10.2.js:118)

 

Edit: I updated jquery version of the project. Mine was jquery-1.10.2.js. From Nugget Manager I updated version to jquery-3.1.1.js 

Now I can show grid on browser. Maybe this helps someone. 

I am using Google Chrome and Default Asp.NET MVC Project and my codes are here.

=== HomeJS.js ===

$(document).ready(function () {

$(function () {
for (var i = 0; i < northwindProducts.length; i++) {
northwindProducts[i].ImageUrl = "https://lorempixel.com/50/50/food/" + (i % 10) + "/";
}
$("#grid").igGrid({
primaryKey: "ProductID",
width: '100%',
columns: [
{ headerText: "Product ID", key: "ProductID", dataType: "number", width: "15%", hidden: true },
{ headerText: "Image", key: "ImageUrl", dataType: "string", width: "15%", template: "" },
{ 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
}
]
}
]
});
});

});

=== Index.cshtml ===

=== _Layout.cshtml ===

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

 

I may have found the issue here. I was having the save issue. After inspecting the page I realized that the default header was also adding .css and scripts in the <head>. After removing these the grid showed without issue.