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?
Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn't loaded yet.
To solve this error:
Load the jQuery library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts .
There can be multiple other reasons for this issue:
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
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.
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:
<link href="https://cdn-na.infragistics.com/igniteui/2019.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="https://cdn-na.infragistics.com/igniteui/2019.2/latest/css/structure/infragistics.css" rel="stylesheet" /> <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.core.js"></script> <script src="https://cdn-na.infragistics.com/igniteui/2019.2/latest/js/infragistics.lob.js"></script>
Please let me know if you need any further assistance with this matter.