Object doesn't support property or method 'igGrid' occurred

Question

I get an error when trying to render an Infragistics grid and I cannot find the cause of this, googled it, searched forums etc… Unhandled exception at line 1423, column 16 in eval code ‘0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'igGrid' occurred’ in a run time generated file called eval code: $(function () {$('#FileContent').igGrid({ dataSource: {"Records":[{"Id":0,"Field ... etc I tried using a collection instead of the GridModel, same result. Where is my error? Infragistics wants money from me to answer questions... I am using Visual Studio 2017 and it is a ASP.NET MVC 4 project. The controller response works OK, the error occurs when the client tries to render the grid.

Please help!

Thank you!

My Models:

public class SasFileViewModel
{
    public int Id { get; set; }

    [Display(Name = "File Name")]
    public string Name { get; set; }

    [Display(Name = "File Path")]
    public string Path { get; set; }

    public string Header { get; set; }

    public virtual List<SasFileLine> Content { get; set; }
}

public class SasFileLine
{
    public int Id { get; set; }
    public List<string> Fields { get; set; }
}

public class SasFileListViewModel
{
    [Display(Name = "File Id")]
    public int SelectedFileId { get; set; }
    public SelectList SasFiles { get; set; }
}

My controller:

public ActionResult SelectedSasFile(int selectedFileId)
    {
        if (!ModelState.IsValid)
            return View();

        var model = GetSasFile(selectedFileId);
        return PartialView(model);
    }

    private GridModel GetSasFile(int selectedFileId)
    {
        var sasFile = new SasFileViewModel()
        {
            Id = 0,
            Content = new List<SasFileLine>()
        };

        var sasFileDtoList = SasAsp.BusinessLibrary.SasFile.GetSasFiles().ToList();
        if (sasFileDtoList != null && sasFileDtoList.Count > 0)
        {
            var dto = sasFileDtoList.Where(x => x.Id == selectedFileId).First();

            var fileName = Path.Combine(dto.Path, dto.Name);
            var sasFileDto = SasAsp.BusinessLibrary.SasFile.GetSasFile(fileName);

            sasFile = MapToModel(sasFileDto); // just maps data transfer objects to the model
        }

        var fileContentGrid = CreateGrid(sasFile);
        return fileContentGrid;
    }

    private static GridModel CreateGrid(SasFileViewModel sasFile)
    {
        var fileContentGrid = new GridModel
        {
            ID = "FileContent",
            DataSource = sasFile.Content.ToList().AsQueryable(),
            AutoGenerateColumns = true
        };

        return fileContentGrid;
    }

My partial view for the grid:

@using Infragistics.Web.Mvc
@using SasAspMvc.Models
@model GridModel

<link href="~/IgniteUI/css/structure/infragistics.css" rel="stylesheet" />
<link href="~/IgniteUI/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />

<script type="text/javascript" src="~/IgniteUI/js/infragistics.core.js"></script>
<script type="text/javascript" src="~/IgniteUI/js/infragistics.lob.js"></script>

@(Html.Infragistics().Grid(Model))

My index view:

@using SasAspMvc.Models
@model SasFileListViewModel

@{
    ViewBag.Title = "SAS Files";
}

<h2>@ViewBag.Title.</h2>

@{Html.RenderPartial("SasFileList", Model); }  // This renders a combo box with a list of existing files too choose from

<table id="FileContent" style="white-space: pre-line"></table>

<script type="text/javascript">
$(document).ready(function () {
    $("#SelectedFileId").on("change", function () {
        var id = $('#SelectedFileId').val();
        showSelectedFile(id);
    });
});

function showSelectedFile(id) {
    $("#FileContent").html('<b>Please wait...</b>');
    //debugger;
    $("#FileContent").load('@(Url.Action("SelectedSasFile", "SasFiles", null, Request.Url.Scheme))?selectedFileId=' + id);

}

Answer 1

You should include jQuery and jQuery UI before the core and lob scripts of Ignite UI.

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>