Child grid not populating

[Tom McNeer]

Hi,

I have previously received guidance from you regarding the construction of nested datagrids, and have one working successfully with three levels.

However, I now have a parent/child grid where the child grid does not populate, even though the data appears to be passed correctly. I'm attaching a zip with the Vue template and a .json file representing data that is being sent to the template. The two arrays within the json data defined as "bills" and "payments"

The main template has three grids. Two have no children The third, beginning on line 153, has a child grid defined within the data property. The child grid is rendered with headers, but every child grid shows "No records to display," even though the array passed into the child grid (paymentGrid) has many entries, all with the BillID attribute, which is set as the queryString for the child grid.

Thanks in advance for your help.

Attachment: ChildGridProblem_4267b1.zip

[Balaji Sekar]

 

Hi Tom, 

 

Greetings from the Syncfusion support. 

 

Based on your code example we have created a sample with Grid properties & JSON data and we found that you have defined childGrid dataSource is incorrect. So, we suggest you to defined childGrid’s dataSource as “billingData.payements” instead of “this.billingData.payements”. 

 

Please refer the below code example and sample for more information. 

 

[App.Vue] 

paymentGrid: { 

        ref: "pGrid", 

        dataSource: billingData.payments, 

        queryString: "BillID", 

        enableAltRow: false, 

        columns: [ 

          { 

            headerText: "Payment", 

            width: "300", 

            field: "Description", 

          }, 

          { 

            field: "PaymentDate", 

            headerText: "Date Paid", 

            format: "yMd", 

            type: "date", 

            textAlign: 'center"', 

            width: "90", 

          }, 

          { 

            field: "Amount", 

            headerText: "Paid", 

            textAlign: "right", 

            width: "100", 

            format: "C2", 

            type: "number", 

          }, 

        ], 

      } 

 

Sample link: https://codesandbox.io/s/vue-forked-6l1ye  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar 

[Tom McNeer]

Thanks for your reply. However, your suggestion is not correct, because the data cannot be imported manually as you do in your example. It is provided, as in my example, as a prop to the component, and thus within the data() property of the template, the reference must use "this."

Without it, there's simply a runtime error stating "billingData is not defined."

To give you further insight: sometimes - but not always - I will do a compile and get the "No records" message from the child grids. However, if I make a change to the child grid structure - such as removing a column - and recompile, the child grids will populate correctly. This is further proof that the datasource for the child grid is correct.

As I say, this behavior is not consistent. The consistent behavior is that when the grid is created, the child grids do not populate. Please run a test using the files supplied earlier.

Also, for whatever reason, in your example the parent row appears, but the dropdown arrow does not reveal a child row.

[Balaji Sekar]

Hi Tom, 

 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  

  

https://www.syncfusion.com/account/login 

 

Regards, 

Balaji Sekar