Uncaught ReferenceError: $ is not defined … (on $('#igGrid').igGrid ) — newbie question

My first day with Infragistics. Trying to use a grid in ASP MVC:

IN THE CONTROLLER, THIS:
[ChildActionOnly]
public ActionResult Detail2Grid()
{
var listeProduitCommande = from s in db.produitCommandes.Include(p => p.commande).Include(p => p.fournisseur)
where s.actif == true &&
s.noCommande == CommandeUI
select s;
return PartialView(listeProduitCommande);
}

ALONG WITH THIS IN THE VIEW:
<div>
@{Html.RenderAction(“Detail2Grid”, “commandes”);}
</div>

ALONG WITH THIS in Detail2Grid.cshtml:
@using Infragistics.Web.Mvc;

@model IQueryable<SPCP.Models.produitCommande>

<h2>Items List</h2>

@(Html.Infragistics()
.Grid(Model)
.ID(“igGrid”)
.Width(“600px”)
.Height(“600px”)
.AutoGenerateColumns(false)
.PrimaryKey(“produitCommandeID”)
.UpdateUrl(Url.Action(“SaveData”))
.Columns(column =>
{
column.For(x => x.produitCommandeID).HeaderText(“produitCommandeID”);
column.For(x => x.prix).HeaderText(“prix”);
column.For(x => x.codeCatalogue).HeaderText(“codeCatalogue”);
column.For(x => x.quantite).HeaderText(“quantite”);
column.For(x => x.montant).HeaderText(“montant”);
column.For(x => x.codeCategorie).HeaderText(“codeCategorie”);
column.For(x => x.description).HeaderText(“description”);
column.For(x => x.fournisseurID).HeaderText(“fournisseurID”);
column.For(x => x.codeFournisseur).HeaderText(“codeFournisseur”);
column.For(x => x.reference).HeaderText(“reference”);
column.For(x => x.noCommande).HeaderText(“noCommande”);
column.For(x => x.actif).HeaderText(“actif”);
column.For(x => x.notes).HeaderText(“notes”);
column.For(x => x.etage).HeaderText(“etage”);
// Property is not primitive may cause circular reference
column.For(x => x.commande).HeaderText(“commande”);
// Property is not primitive may cause circular reference
column.For(x => x.fournisseur).HeaderText(“fournisseur”);
})
.Features(f =>
{
f.Selection()
.Mode(SelectionMode.Row);
f.Updating()
.EnableAddRow(true)
.EnableDeleteRow(true)
.EditMode(GridEditMode.Row);
})
.DataBind()
.Render())

GENERATES THIS:

<div>
<h2>Items List</h2>
<table id=”igGrid”></table>
<script type=”text/javascript”>$(function () {$(‘#igGrid’).igGrid({ dataSource: {“Records”:[{“produitCommandeID”:9135,”prix”:61.2500,”codeCatalogue”:”10001″,”quantite”:2,”montant”:122.5000,”codeCategorie”:10,”description”:”10001-RUNNING MAN (MÉTAL)”,”fournisseurID”:16,”codeFournisseur”:”RMSOWH-UDC”,”reference”:”1 unité”,”noCommande”:1379,”actif”:true,”notes”:”1 unité X la quantité”,”etage”:”Aucun”}],”TotalRecordsCount”:0,”Metadata”:{“timezoneOffset”:-14400000.0}},……… });});</script>
</div>

WHERE I GET THIS:
1379:236 Uncaught ReferenceError: $ is not defined

… (on $(‘#igGrid’).igGrid )

WHAT AM I MISSING?

Hello,

Thank you for posting in our community.

The error indicates you are probably missing the jQuery library. Make sure it is referenced before Ignite UI:

My suggestion is to take a look at our documentation about Developing ASP.NET MVC applications with igGrid and specifically the Referencing Styles and Scripts section.

Please let me know if you need any further assistance with this matter.

Thank you for your help. Please see 3 enclosed screen shots. Now it does not compile anymore and I get a red squiggly underline in VS. There is something I am missing.

Hello,

I have created a small sample illustrating the desired behavior. In my sample igGrid renders as expected.

Please test it on your side and let me know how it behaves. If my sample works as expected on your end, please compare all the references in order to check whether there are some differences, which might be causing the squiggly underlines.

6431.Sample.zip