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.
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.
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 ===
© @DateTime.Now.Year - My ASP.NET Application
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><script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
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