Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Fred Kuhne
700
Update to getting started for 2013.1?
posted

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.

Super Basic Issue 1:

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.  

More Complex Issue 2:

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: 104
Error: 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>
}