I am trying to use Ignite for the first time to analyze it against other options for our newest project. My environment is VS2012 SP1, MVC4 running on Windows 7.
I'm running into a bunch of differing problems from MVC4 integration (the video for getting started is out of date) to the sample applications themselves not working as expected (Personal Finance Dashboard throws a javascript error about MSGesture being undefined in both IE10 and Chrome). Also, while having complex samples is wonderful as we get used to the new toolset, it would be amazing to have basic, simpler example projects using MVC and with and without the MVC wrappers, databinding to datatables from a sql database, etc.
What is really needed is an updated getting started that takes you from beginning to end of integrating Ignite into an MVC4 application both using the MVC wrapper dll and not using the MVC wrapper dll to clearly show what you need to do differently. It seems that the changes between 2012.2 and 2013.1 are significant enough and the timing is just right that this process is extremely frustrating at the moment for teams with a deadline.
Lastly, call it a pet peeve of mine perhaps, but videos are less useful than written documentation for things like getting started or seeing how to do things. You can't copy/paste code and it's more difficult to switch back and forth, pause the video, back up the video, etc. compared to written documentation. This isn't a how-to for an existing application this is supposed to help developers get off the ground with a significantly more complex use case than a simple user. Just my own opinion of course, I'm sure you have plenty of users who feel just the opposite. All in all the "Getting Started" process seems non-intuitive. I definitely understand the competition in our software world but this release seems to not quite be up to Infragistic's standard. Either that or I'm getting old and slow. It could be that. ;)
=============================================================================
All that said, here are a couple specific examples of issues I'm having.
I created a stock MVC4 application from the built in VS template. I copied the css and js (including all files and subfolders) from the Ignite install folder to a subfolder "ig" in the content and scripts folders respectively. I copied the MVC wrapper ddll to bin and added a reference to it. I then tried the following and had the following issues. You can download the entire solution in a rar file here so you can open it and see where I've gone wrong or where things aren't working. The 1MB limit kept me from uploading it directly.
Took the text from the date picker sample in the getting-started folder from the Ignite installation folder, copied it and pasted it into a new .html page at the root of my MVC application. Updated the script locations. In IE10, I get no textbox decoration, no date picker. In Chrome The date picker dropdown arrow flashes and goes away. I then get what looks like a masked editor with proper datepicker arrow key functionality, but no calendar dropdown. I've attached the html file.
I opened the _Layout.cshtml in and updated the head to have the following code:
<head> <meta charset="utf-8" /> <title>@ViewBag.Title - My ASP.NET MVC Application</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" />
@Scripts.Render("~/bundles/jquery") <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/Dashboard.css")" rel="stylesheet" type="text/css" /> <script src='@Url.Content("~/Scripts/ig/infragistics.loader.js")' type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/modernizr-2.6.2.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.blockUI.js")" type="text/javascript"></script>
<script type="text/javascript"> $.ig.loader({ scriptPath: '@Url.Content("~/Scripts/ig")', cssPath: '@Url.Content("~/Content/ig")', theme: "metro", locale: "@ViewBag.Language", regional: "@ViewBag.Language", resources: 'igGrid.*,igTree,igShared,igCombo,igHtmlEditor,igDialog' }); </script>
</head>
I moved @Scripts.Render("~/bundles/jquery") from the bottom of the file to the place it has now inside the head element.
I then opened Views/Home/Index.cshtml, removed the filler text and added the following the error message. When I try to run that page I get the error
Line: 104Error: Object doesn't support property or method 'igGrid'
<table id="grid"></table>
@section scripts{ <script type="text/javascript"> var products = [ { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381" }, { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327" }, { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349" }, { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908" }, { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036" }, { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965" }, { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738" }, { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457" }, { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903" } ]; $(function () { $("#grid").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>}
Hi Fred,
Thanks for your valuable feedback! We are in the process of improving our samples and documentation experience and I am sure you will start seeing your issues addressed in the next releases.
Regarding the specific issues you've brought up, there are a couple of things I've noticed:
1) You are referencing jquery-ui.min.js, but it doesn't exist in the Scripts folder. Instead you have jquery-ui-1.8.24.min.js. After I've changed jquery-ui to jquery-ui-1.8.24
2) In your Index.cshtml , you are using the document ready shortcut function, but since the $.ig.loader is loading the scripts, you need to wrap your code in an $.ig.loader() statement, so that it waits for the scripts to load:
so changing $(function () {
to:
$.ig.loader(function () {
After those 2 changes, the sample loads and works fine.
I also tried copy/pasting the DatePicker example, and it seems to work fine, too.
Hope it helps. Let me know if you have any other questions. Thanks,
Angel
hey Fred,
just checking if you need any additional help. Thank you,
Hello Angel and thanks for your reply. Unfortunately, because of the deadline we had we had to go with another product which had a smoother onboarding process. We'll take another look at Infragistics offering in the future as I'm sure it will improve.