We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

childgrid causes loop

I have a viewmodel that holds a list of products and a list of categories that are assigned to products

I want to show all the products in a grid, with a subgrid showing the categories that product is in.

I can show both grids separately, but when I add the CategoryGrid as a childgrid to the ProductGrid I get an error

   [JsonSerializationException: Self referencing loop detected for property 'ApplicationInstance' with type 'ASP.global_asax'. Path 'childGrid.Context.ApplicationInstance.Context'.]

this is my code

@code
Dim productGrid = Html.EJS().Grid("products")         With productGrid             .DataSource(Model.Products)             .Columns(Sub(col)                          col.Field("Id").HeaderText("Product ID").TextAlign(TextAlign.Right).Add()                          col.Field("Name").HeaderText("Naam").Add()                      End Sub)         End With         Dim categoryGrid = Html.EJS().Grid("categories")         With categoryGrid             .DataSource(Model.ProductCategories)             .Columns(Sub(col)                          col.Field("Id").HeaderText("ID").TextAlign(TextAlign.Right).Add()                          col.Field("Product_Id").HeaderText("Product_Id").Add()                      End Sub)             .QueryString("Product_Id")             .Height(200)         End With     End Code     <div class="gridCategories">@categoryGrid.Render()div>     @productGrid.ChildGrid(categoryGrid)     <div class="gridProducts">@productGrid.Render()div>

the data I have for products looks like:

{ "Id": 24, "Name": "productX", }


the data I get for categories looks like:

{ "Id": 2, "ProductCategory_Id": 2, "Product_Id": 24 },


If I comment out the second last line (productgrid.childgrid(categorygrid)) I get the two grids separately; if I uncomment that line it gives the above error

What am I doing wrong?


5 Replies

HJ Hariharan J V Syncfusion Team May 31, 2019 01:05 PM UTC

Hi Koen, 

Thanks for contacting Syncfusion support. 

We have validated the reported issue and found that this a circular reference issue of the newtonsoft json. By default, this issue will occur when we try to serialize complex models by using the newtonsoft. From your given code we suspect that you have also used complex model binding to provide the data source to Grid. So you have faced this issue. To resolve this issue we suggest you to select the particular table from the database and then get the data from that particular table. 
 
Regards, 
Hariharan 



KO Koen June 1, 2019 09:18 PM UTC

Hello,

thanks for your answer. However, I am surprised by your answer. Does that mean we cannot just use a list with navigation properties to populate a grid?

I have created a test project with Products and Categories (with a many-to-many relationship). Could you suggest what is the best way to load all products (using EF6) with their related categories and show them in a grid, with a (CRUD enabled) childgrid containing the categories...?

Best regards,
Koen

Attachment: SyncFusionChildGridTest_d55b96f8.zip


HJ Hariharan J V Syncfusion Team June 4, 2019 11:05 AM UTC

Hi Koen, 

Thanks for the sample. 

First we would like to inform that this is not a Grid related issue and that this is a general issue of the Newtonsoft. So we have found some general solution for this Self referencing loop issue you can find that solutions in the below link.  

General links, 
 
 

Regards, 
Hariharan 



KO Koen June 7, 2019 07:43 PM UTC

Hi,

I already have seen these links as well, so I have already added the following lines in my global.asax file, in the Application_Start() method:

Dim config = GlobalConfiguration.Configuration
config.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore

but still the errors is thrown. I think that somehow these settings are not used when calling the Grid.Render() function ?

Do you have any example where many-to-many data is shown in a grid with childgrids?

Thanks,
Koen



HJ Hariharan J V Syncfusion Team June 11, 2019 11:44 AM UTC

Hi Koen, 

From your sample we found that your client side Grid rendering code way is caused this “self reference loop issue”. So we suggest to render the Grid directly in client side instead of storing the Grid variable. Please refer the below code snippet, 

@Html.EJS().Grid("Grid").DataSource(ViewBag.ordersData).AllowPaging(True).Load("load").Columns(Sub(col) 
                                                                                                        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(True).Width("120").Add() 
                                                                                                        col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add() 
                                                                                                        col.Field("EmployeeID").HeaderText("Employee ID").Width("120").Add() 
                                                                                                    End Sub).Render() 
 
<script type="text/javascript">  
    var data = @Html.Raw(Json.Encode(ViewBag.employeesData)); // render the child Grid by using parent Grid load event 
    function load(args) { 
        this.childGrid = new ej.grids.Grid({ 
            dataSource: data, 
            queryString: "EmployeeID", 
            load: function (args) { 
                this.query.queries.pop(); 
            }, 
            columns: [ 
                { field: 'FirstName', headerText: 'First Name', width: 120 }, 
                { field: 'LastName', headerText: 'Last Name', width: 120 } 
            ] 
        }); 
    } 
</script> 

Also to avoid this “self reference loop issue” in server side, we suggest to ignore the nested class values by selecting the required fields from the respective data table (I.e Products and Categories) and provide that selected values to Grid through the viewBag property. Please refer the below code snippet, 

Private ReadOnly db As New NORTHWNDEntities 
    Public Property GridData As Object 
    Function Index() As ActionResult 
        ViewBag.ordersData = (From orders In db.Orders Select New With {orders.OrderID, orders.CustomerID, orders.EmployeeID}).ToList() 
        ViewBag.employeesData = (From employees In db.Employees Select New With {employees.EmployeeID, employees.FirstName, employees.LastName}).ToList() 
        Return View() 
    End Function 

For your convenience, we have prepared the sample with this requirement and you can find that sample from the below link, 


Regards, 
Hariharan 


Loader.
Up arrow icon