45
Unable to reload the data source in a igGrid
posted

I put together a page and model without the extra project details, just to make sure it wasn't something else on the page or something else about the controller (or something my client would not want posted in a forum).

This sample produces the same error I have been running into in the project.  The grid itself works correctly, until I try to rebind the data.  I have not used these controls before this project, so it is possible I missed something when setting the grid or controller up.  I have been through the Forums.  I found several people reporting the same type of error, but none of the suggested fixes corrected the problem.
In the application, the user enters search criteria and the application returns the set of records meeting those criteria.  The error occurs when the data is bound to the grid.  The reported error is
The scripts used with this page are:
jquery-3.1.1.js
jquery-ui-1.12.0.js
infragistics.core.js
infragistics.lob.js
The grid is defined as:
@model IQueryable<CodepalWeb.ViewModels.SampleItem>
 
@(Html.Infragistics()
    .Grid(Model)
    .ID("igGrid")
    .Width("600px")
    .Height("600px")
    .AutoGenerateColumns(false)
    .Columns(column =>
    {
     column.For(x => x.ID).HeaderText("ID");
     column.For(x => x.FirstValue).HeaderText("FirstValue");
     column.For(x => x.SecondValue).HeaderText("SecondValue");
    })
    .DataBind()
    .Render())
There are two buttons on the page, because there were two suggested ways to refresh the datasource in the Forums.  The buttons run,
 
 

    function updateGrid() {
        $.ajax({
            method: "GET",
            dataType: "json",
            url: "http://localhost:51229/Sample/UpdateGrid",
        }).done(function (data) {
            if (data) {
                var grid = $("#igGrid");
                if (grid) {
                    grid.igGrid("option", "dataSource", data);
                    grid.igGrid("dataBind");
                }
            }
        });
    }

    function otherUpdateGrid() {
        $.ajax({
            method: "GET",
            dataType: "json",
            url: "http://localhost:51229/Sample/UpdateGrid",
        }).done(function (data) {
            if (data) {
                var grid = $("#igGrid");
                if (grid) {
                    grid.igGrid("dataSourceObject", data);
                    grid.igGrid("dataBind");
                }
            }
        });
    }
 
In both cases the exception is thrown while processing the grid.igGrid("dataBind"); line. 
The data provided by the controller,
 
public ActionResult Index()
{
   var model = new List<SampleItem>
   {
       new SampleItem { ID = 1, FirstValue = "AA", SecondValue = "aa" },
       new SampleItem { ID = 2, FirstValue = "BB", SecondValue = "bb" },
       new SampleItem { ID = 3, FirstValue = "CC", SecondValue = "cc" },
       new SampleItem { ID = 4, FirstValue = "DD", SecondValue = "dd" },
       new SampleItem { ID = 5, FirstValue = "EE", SecondValue = "ee" }
    };
    return View(model.AsQueryable());
}

public ActionResult UpdateGrid()
{
    var model = new List<SampleItem>
    {
        new SampleItem { ID = 6, FirstValue = "FF", SecondValue = "ff" },
        new SampleItem { ID = 7, FirstValue = "GG", SecondValue = "gg" },
        new SampleItem { ID = 8, FirstValue = "HH", SecondValue = "hh" },
        new SampleItem { ID = 9, FirstValue = "II", SecondValue = "ii" },
        new SampleItem { ID = 10, FirstValue = "JJ", SecondValue = "jj" }
     };
     return Json(model.AsQueryable(), JsonRequestBehavior.AllowGet);
}
 
Finally, the view model is,
 
public class SampleItem
{
    public int ID { get; set; }
    public string FirstValue { get; set; }
    public string SecondValue { get; set; }
}
 
I would appreciate any help or suggestions at this point. 
Thanks,
Daniel Replogle
Parents Reply Children
No Data