I've got an ASP.NET MVC 4 app using igGrid. When the page first comes up, it works fine. If I refresh the page, I get the error:
Microsoft JScript runtime error: Object doesn't support property or method 'igGrid'
In the F12 developer tools, all the scripts seem to be loaded, so my guess is something's not happening in the proper order.
In my _Layout.cshtml, I have:
<script type="text/javascript"> $.ig.loader({ scriptPath: '@Url.Content("~/Scripts/")', cssPath: '@Url.Content("~/Content/")', resources: 'igTree,igGrid' });</script>
In the .cshtml of the page with the problem, I simply have:
@using Infragistics.Web.Mvc; @model GEMS.Web.Models.MedicalProcedurePriceMaintModel @{ ViewBag.Title = "Index"; } <h2>Medical Procedure Price Maintenance</h2>
@(Html.Infragistics(). Grid<GEMS.Web.Business.Contracts.IMedicalItemPrice>(). Columns(column=> { column.For(x => x.WarehouseCode).HeaderText("Warehouse").Width("70px"); column.For(x => x.Item).HeaderText("Item").Width("150px"); column.For(x => x.Description).HeaderText("Description").Width("200px"); column.For(x => x.Price).HeaderText("Price").Width("50px").Format("C"); }). ID("grid"). DataSourceUrl(Url.Action("BindGridFiltering")). Width("500px"). DataBind(). Render())
BTW, it'd be nice if you guys had code tags for your HTML editor so this stuff would actually format (or if you have them, make it more obvious where they are).
Hi,
Mixing JavaScript loader code with Infragistics MVC Wrapper is not supported scenario. The reason is that the Infragistics MVC Wrapper checks where there is Loader MVC Wrapper code. In case there is the generate code on the client looks like this:
$.ig.loader("igGrid.Paging.Sorting", function(){/*igGrid initialization code here*/});
Otherwise the code looks like this:
$(function() {/*igGrid initialization code here*/});
In your case there is an absence of Loader MVC Code so the generated code will be the later which causes the error you're observing.
The fix for your issue is to put Loader MVC Wrapper in the View.
Hope this helps,
Martin Pavlov
Infragistics, Inc.
I am also getting this error. What do I need to include (or exclude) to get the simple examples to work? Here is my code:
@{ ViewBag.Title = "IGGrid";}<h2>IGGrid</h2><script> var products = []; products[0] = { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" }; products[1] = { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" }; products[2] = { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" }; products[3] = { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" }; products[4] = { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" }; products[5] = { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" }; products[6] = { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" }; products[7] = { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" }; products[8] = { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" }; products[8] = { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137" };</script><table id=”grid1”></table><script>$(function () { $("#grid1").igGrid({ columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "Name", dataType: "string" }, { headerText: "Product Number", key: "ProductNumber", dataType: "string" }, ], width: '500px', dataSource: products });});</script>
I added this to my _Layout_cshtml page:
<script src="scripts/jquery.js" type="text/javascript"></script> <script src="scripts/jquery-ui.js" type="text/javascript"></script> <link href="css/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
And this to the web.config in my Views folder:
<add namespace="Infragistics.Web.Mvc"/>
Perhaps you can also point me to a page which shows how to set up an MVC project to use your controls. The stuff on this page gives even more errors: http://help.infragistics.com/Help/NetAdvantage/jQuery/2013.1/CLR4.0/html/Deployment_Guide_JavaScript_Resources.html
Thanks
Amanda,
After the jquery-ui reference in _Layout.cshtml you'll want to add:
<script src="js/infragistics.loader.js" type="text/javascript"></script>
<script src=
"js/infragistics.loader.js"
type=
"text/javascript"
></script>
Then, somewhere below that, add:
$.ig.loader({
scriptPath:
"js/"
,
cssPath:
"css/"
resources:
"igGrid.Sorting"
});
Thanks for the help, Pete, but it still shows the same error. This is what my _layout.cshtml looks like now:
<script src="scripts/jquery.js" type="text/javascript"></script> <script src="scripts/jquery-ui.js" type="text/javascript"></script> <script src="js/infragistics.loader.js" type="text/javascript"></script> $.ig.loader({ scriptPath: "Scripts", cssPath: "Content", resources: "igGrid.*" }); <link href="css/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
For the scripts and content folders, I merely copied all the files in C:\Program Files (x86)\Infragistics\IgniteUI 2013.1\css to my Content folder and all files under C:\Program Files (x86)\Infragistics\IgniteUI 2013.1\js to my Scripts folder. I then added all those files to my project by dragging them from Windows Explorer to the Content and Scripts folders respectively. Was that correct?
I believe you'll also need the jQuery-ui CSS files. In our app, this is what we have:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js" type="text/javascript"><script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.js" type="text/javascript"><script src="/GEMS.Web/Scripts/infragistics.loader.js"><link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/start/jquery-ui.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="/GEMS.Web/Content/themes/infragistics/infragistics.theme.css"><link rel="stylesheet" href="/GEMS.Web/Content/structure/infragistics.css"><script type="text/javascript"> $.ig.loader({ scriptPath: '@Url.Content("~/Scripts/")', cssPath: '@Url.Content("~/Content/")', resources: 'igGrid.*,igTree,igShared,igCombo,igHtmlEditor,igDialog' });
</script>
Additionally, we have a reference ot Infragistics.Web.Mvc