TypeError: this.model.currentViewData is undefined (In Implimentation of Hierarchical Grid --> Child Grid)

Question

I am implementing a Hierarchy Grid in ASP.Net MVC using syncfusion Grid Control. I am fetching the data from server side with an ajax call on the expansion of child grid. When i try to expand child grid, the ajax call fetches the data in JSON format and a JavaScript error (TypeError: this.model.currentViewData is undefined) occurs and data in the child grid doesn't load into child grid. Details of Question and running source code example are also available here.

Classes

 public class Data
{
    public int OrderID { get; set; }
    public int EmployeeID { get; set; }
    public string ShipCountry { get; set; }
    public List<ChildData> Employee { get; set; }
}
public class ChildData
{
    public int EmployeeID { get; set; }
    public string FirstNAme { get; set; }
    public string LastNAme { get; set; }
}

Controller

    public class GridController : Controller
{
    //
    // GET: /Grid/
    List<Data> obj = new List<Data>();


    public ActionResult GridFeatures()
    {

        var DataSource = GetData();
        ViewBag.datasource = DataSource.ToList();
        return View();
    }
    public JsonResult GetChildData(int _empID)
    {
        var ChildDaqtaSource = ChildData(_empID);
        return Json(ChildDaqtaSource, JsonRequestBehavior.AllowGet);
    }

    public static List<Data> GetData()
    {

        List<Data> obj = new List<Data>();
        //obj.Add(new Data() { OrderID = 1000, EmployeeID = 1, ShipCountry = "india", Employee = new List<ChildData>() { new ChildData() { EmployeeID = 1, FirstNAme = "Janet", LastNAme = "David" } } });
        //obj.Add(new Data() { OrderID = 1001, EmployeeID = 2, ShipCountry = "France", Employee = new List<ChildData>() { new ChildData() { EmployeeID = 2, FirstNAme = "Nancy", LastNAme = "John" } } });
        //obj.Add(new Data() { OrderID = 1002, EmployeeID = 3, ShipCountry = "US", Employee = new List<ChildData>() { new ChildData() { EmployeeID = 3, FirstNAme = "David", LastNAme = "Staven" } } });
        //obj.Add(new Data() { OrderID = 1003, EmployeeID = 4, ShipCountry = "US", Employee = new List<ChildData>() { new ChildData() { EmployeeID = 4, FirstNAme = "Janet", LastNAme = "David" } } });

        obj.Add(new Data() { OrderID = 1000, EmployeeID = 1, ShipCountry = "india" });
        obj.Add(new Data() { OrderID = 1001, EmployeeID = 2, ShipCountry = "France"  });
        obj.Add(new Data() { OrderID = 1002, EmployeeID = 3, ShipCountry = "US"  });
        obj.Add(new Data() { OrderID = 1003, EmployeeID = 4, ShipCountry = "US" });
        return obj;

    }
    public static List<ChildData> ChildData(int _EmpID)
    {
        List<ChildData> _childData = new List<ChildData>();
        _childData.Add(new ChildData { EmployeeID = 1, FirstNAme = "John", LastNAme = "Freeman" });
        _childData.Add(new ChildData { EmployeeID = 1, FirstNAme = "steve", LastNAme = "Alexander" });
        _childData.Add(new ChildData { EmployeeID = 1, FirstNAme = "Ali", LastNAme = "Naeem" });
        _childData.Add(new ChildData { EmployeeID = 1, FirstNAme = "Alex", LastNAme = "Wonder" });
        _childData.Add(new ChildData { EmployeeID = 1, FirstNAme = "Bill", LastNAme = "Gates" });
        _childData.Add(new ChildData { EmployeeID = 1, FirstNAme = "Alan", LastNAme = "Turing" });

        _childData.Add(new ChildData { EmployeeID = 2, FirstNAme = "Mark", LastNAme = "Anthoney" });
        _childData.Add(new ChildData { EmployeeID = 2, FirstNAme = "Carl", LastNAme = "Shoemaker" });
        _childData.Add(new ChildData { EmployeeID = 3, FirstNAme = "Carlos", LastNAme = "Anthony" });
        return _childData.Where(x => x.EmployeeID == _EmpID).ToList();
    }
}

Razor View (GridFeatures.cshtml)

@model  List<RemoteSaveAdaptorSample.Controllers.Data>
<h2>Requisitions</h2>
@(Html.EJ().Grid<RemoteSaveAdaptorSample.Controllers.Data>("EmployeeGrid")
    .Datasource((List<RemoteSaveAdaptorSample.Controllers.Data>)ViewBag.DataSource)
    //.Datasource(Model)
    .AllowSorting(true)
    .AllowResizing(true)
    .AllowPaging(true)
    .AllowGrouping(true)
    .AllowTextWrap(true)
    .AllowScrolling(true)
    .AllowFiltering()
    .EnableRowHover(true)
    .Columns(col =>
    {
        col.Field(x => x.EmployeeID).HeaderText("EmployeeID").Width(30).IsPrimaryKey(true).AllowResizing(false).Add();
        col.Field(x => x.OrderID).HeaderText("OrderID").Width(60).AllowFiltering(true).Add();
        col.Field(x => x.ShipCountry).HeaderText("Country").Width(100).Add();

    })
    .ChildGrid
    //<RemoteSaveAdaptorSample.Controllers.ChildData>
    (_childGrid =>
    {
        _childGrid
        .QueryString("EmployeeID")
        .AllowPaging()
        .Columns(_childCol =>
        {
            _childCol.Field("EmployeeID").HeaderText("EmployeeID").Add();
            _childCol.Field("FirstNAme").HeaderText("First Name").Add();
        })
        .ClientSideEvents(x => x.Load("loadEvent"))
        ;
    })
)
<script type="text/javascript">
    function loadEvent(args) {
        var data = this.model.parentDetails.parentKeyFieldValue;
        this.model.dataSource = ej.DataManager({
            url: "/grid/GetChildData?_empID=" + data + ""
            , adaptor: "UrlAdaptor"
        });
    }
</script>

Any help is appriciated

Thanx

Answer 1

I have checked the query and found that you have returned the result alone from server side instead of passing it as result and count pair. When using UrlAdaptor it is must to return the data as result and count pair. So that it will bind the data to the grid.

Refer the code example

 public JsonResult GetChildData(int _empID)
    {
        var ChildDaqtaSource = ChildData(_empID);
        var count = ChildDaqtaSource.Count;
        return Json(new { result = ChildDaqtaSource, count = count }); 
     }

Refer the documentation link of UrlAdaptor Link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor