Unable to reload the data source in a igGrid

Answered (Verified) This post has 1 verified answer | 4 Replies | 3 Followers Thread's RSS feed.

Daniel Replogle
Points 45
Replied On: Wed, Mar 8 2017 12:11 PM Reply

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
  • Post Points: 20

Verified Answer

[Infragistics]Mike P
Points 23,985
Infragistics Employee
Answered (Verified) Replied On: Thu, Mar 9 2017 3:28 PM Reply
Verified by Daniel Replogle

Hello Daniel,

 

Thank you for the update. I believe the reason you are getting this error is you are changing the type of the datasource on the update and the grid isn’t setup properly to take that type. Instead, I recommend you use the datasourceurl of the grid and just call databind on your button click. Your grid will look like the following:

 

@(Html.Infragistics()

    .Grid<igGrid_MVC5.Models.SampleItem>()

    .ID("igGrid")

    .Width("600px")

    .Height("600px")

    .AutoGenerateColumns(false)

    .DataSourceUrl("/Home/UpdateGrid/")

    .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())

 

Your JavaScript function:

function otherUpdateGrid() {

        var grid = $("#igGrid");

        grid.igGrid("dataBind");

    }

 

The method that returns the data in your controller:

 

[GridDataSourceAction]

        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 View(model.AsQueryable());

        }

 

Then your index would just look like this:

public ActionResult Index()

        {

            return View();

        }

Sincerely,
Mike P.
Software Developer
Infragistics, Inc.
www.infragistics.com

  • Post Points: 20

All Replies

[Infragistics]Mike P
Points 23,985
Infragistics Employee
Replied On: Wed, Mar 8 2017 3:17 PM Reply

Hello Daniel,

Thank you for contacting Infragistics!

It seems your error image did not attach properly to the forum thread. Can you please reattach it in a zip file?

Sincerely,
Mike P.
Software Developer
Infragistics, Inc.
www.infragistics.com

  • Post Points: 20
Daniel Replogle
Points 45
Replied On: Wed, Mar 8 2017 4:07 PM Reply

Sorry about that, the file should be attached to this reply.

Thanks,

Daniel Replogle

  • Post Points: 20
[Infragistics]Mike P
Points 23,985
Infragistics Employee
Answered (Verified) Replied On: Thu, Mar 9 2017 3:28 PM Reply
Verified by Daniel Replogle

Hello Daniel,

 

Thank you for the update. I believe the reason you are getting this error is you are changing the type of the datasource on the update and the grid isn’t setup properly to take that type. Instead, I recommend you use the datasourceurl of the grid and just call databind on your button click. Your grid will look like the following:

 

@(Html.Infragistics()

    .Grid<igGrid_MVC5.Models.SampleItem>()

    .ID("igGrid")

    .Width("600px")

    .Height("600px")

    .AutoGenerateColumns(false)

    .DataSourceUrl("/Home/UpdateGrid/")

    .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())

 

Your JavaScript function:

function otherUpdateGrid() {

        var grid = $("#igGrid");

        grid.igGrid("dataBind");

    }

 

The method that returns the data in your controller:

 

[GridDataSourceAction]

        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 View(model.AsQueryable());

        }

 

Then your index would just look like this:

public ActionResult Index()

        {

            return View();

        }

Sincerely,
Mike P.
Software Developer
Infragistics, Inc.
www.infragistics.com

  • Post Points: 20
Daniel Replogle
Points 45
Replied On: Thu, Mar 9 2017 3:39 PM Reply

Okay, that makes sense. 

Thank you,

Daniel Replogle

  • Post Points: 5
Page 1 of 1 (5 items) | RSS