I can't get it running. What i'am missing.
Create from VS2013 Template MVC Project.
Including the Infragistics folder (css and js)
Adding in the _Layout in the head section ...
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - xx-xx</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") <script src="~/Scripts/jquery-1.10.2.min.js"></script> <script src="~/Scripts/jquery-ui-1.10.4.min.js"></script> <!-- This script reference is require by the Infragistics Loader rendered below --> <script src="@Url.Content("~/Infragistics/js/infragistics.loader.js")"></script></head>
and in the <body> ...
@(Html.Infragistics().Loader() .ScriptPath(Url.Content("~/Infragistics/js/")) .CssPath(Url.Content("~/Infragistics/css/")) .Render() )
After that in the (new Index - View) ...
@using Infragistics.Web.Mvc@model TheShopWeb.Areas.Analysis.Models.ClosedOrdersModel@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml";}<head> <title></title></head>><body> <h2>Index</h2> @(Html.Infragistics().Grid(Model.ListOfOrdersClosed.AsQueryable()) .Width("400px") .DataBind() .Render() ) </body>
Yippie, great now it works - it renders the grid.
One thing left. If i try to do some sorting (or filtering), it throws
"Unhandled exception at line 35, column 28319 in http://localhost:52378/Infragistics/js/modules/infragistics.datasource.js0x800a138f - runtime error in BLOCKED SCRIPT Property "length" ...
the view is simple:
@(Html.Infragistics().Grid(Model.ListOfOrdersClosed.AsQueryable()) .ID("grid1") .PrimaryKey("orders_id") .Height("400px") .Width("100%") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .DefaultColumnWidth("150px") .Columns(column => { column.For(x => x.date_purchased).HeaderText("Datum").Width("10%").Format("dd.MM.yyyy"); column.For(x => x.orders_id).HeaderText("Best.-Nr").Width("10%"); column.For(x => x.payment_method).HeaderText("Zahlungsart").Width("20%"); column.For(x => x.customers_name).HeaderText("Kunde").Width("20%"); column.For(x => x.ot_subtotal).HeaderText("Zwischensumme").Width("10%").Format("c"); column.For(x => x.ot_total).HeaderText("Gesamt").Width("10%").Format("c"); }) .Features(features => features.Sorting().Type(OpType.Remote)) .DataSourceUrl(Url.Action("GetClosedOrders")) .DataBind() .Render() )
// // GET: /Analysis/ClosedOrders/ [GridDataSourceAction] public ActionResult GetClosedOrders() { if (MySession.Current.ClosedOrdersModel.ListOfOrdersClosed == null) MySession.Current.ClosedOrdersModel.CreateList(3, 2014); return View(MySession.Current.ClosedOrdersModel); }
There is a built in sample. Have you tried building the project template that is added when you install Infragistics?
New Project -> Infragistics -> Ignite UI Starter MVC 5
There is a working grid sample there. I did have to comment out their comboBox control in the view to get the sample to work. Also, you want to make sure you are using the correct MVC .dll for the version of MVC you are working with. It ships with 2,3,4, and 5.
I can send you a sample if need be, since I am working on a project that is just as you describe. Before doing so, let's compare the bundleConfig since it is working for me.
My Bundle is setup like this -
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/style.min.css",
"~/Content/site.css",
"~/Infragistics/css/themes/metro/infragistics.theme.css",
"~/Infragistics/css/structure/infragistics.css"));
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-1.10.2.min.js", //{version}.js",
"~/Scripts/jquery-ui-1.10.4.min.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new ScriptBundle("~/bundles/infragistics_JS").Include(
"~/Infragistics/js/infragistics.loader.js"));
}
Then in _Layout I had to move the script references from the MVC template before the body content or it would fail.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Chris Myrick">
<title>@ViewBag.Title - Live View</title>
<!-- reference CSS files -->
@Styles.Render("~/Content/css")
<!-- reference js files -->
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/infragistics_JS")
@RenderSection("scripts", required: false)
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Then in the index.cshtml _
@using Infragistics.Web.Mvc
@model LiveView.Core.ViewModels.TicketReportViewModel
@{
ViewBag.Title = "IMS Policy";
<!--The loader dynamically determines which required scripts and CSS must be referenced based off of the Infragistics components used in this View. -->
@(Html.Infragistics().Loader()
.ScriptPath(Url.Content("~/Infragistics/js/"))
.CssPath(Url.Content("~/Infragistics/css/"))
.Render()
)
<!-- The helpers require that Render() be the last method called. -->
@(Html.Infragistics().Grid(Model.WorkItems.AsQueryable())
....
No it didn't work. Is there a chance to get a sample- somewhat just a application "out of the box MS-Template with a ig-grid? For dummies ...
... and if i do it with "Standard-MS" it works.
@using Infragistics.Web.Mvc@model TheShopWeb.Models.ClosedOrdersModel@{ ViewBag.Title = "ClosedOrders"; Layout = "~/Views/Shared/_Layout.cshtml";}<h2> ClosedOrders</h2>@{ var grid = new WebGrid(@Model.ListOfOrdersClosed, rowsPerPage: 20, columnNames: new[] { "customers_name", "payment_method" }, canPage: true);}@grid.GetHtml( fillEmptyRows: false, mode: WebGridPagerModes.All, columns: grid.Columns( grid.Column("customers_name", header: "customers_name"), grid.Column("payment_method", header: "payment_method") ))"
Look at your Content/css bundle and add the infragistics css for theme and structure.
"~/Infragistics/css/themes/infragistics/infragistics.theme.css",