1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Child Grid not loading from OData 4 datasource

Child Grid not loading from OData 4 datasource

Hi,

I am unable to get my child grid to load at all from a Odata 4 datasource. 

See video of issue: http://www.youtube.com/watch?v=ML5Wzq_4hIE

Here is the Javascript Code for the DataManagers and the Grid

 var orderInvoiceDataManager = new ej.data.DataManager({
                url: '/odata/OrderInvoices',
                adaptor: new ej.data.ODataV4Adaptor(),
                crossDomain: true,

            });


            var orderInvoiceLineDataManager = new ej.data.DataManager({
                url: '/odata/OrderInvoiceLines',
                adaptor: new ej.data.ODataV4Adaptor(),
                crossDomain: true,

            });

            var invoiceLineGrid = new ej.grids.Grid({
                dataSource: orderInvoiceDataManager,
                query: new ej.data.Query().where('OrderId', 'equal', @Model.Id),
                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' },
                allowPaging: true,
                width: 'auto',
                allowResizing: true,
                pageSettings: { pageCount: 4, pageSize: 50 },
                toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
                actionBegin: function (args) {

                columns: [
                    {
                        field: 'OrderId',
                        allowEditing: false,
                        visible: false,
                        defaultValue: @Model.Id

                    },
                 
                    {
                        field: 'Id',
                        isPrimaryKey : true,
                        isIdentity: true,
                        headerText: 'Id',
                        allowEditing: false,
                        defaultValue: 0,
                        textAlign: 'Right', width: 125
                    },


                    {
                        field: 'InvoiceDate',
                        headerText: 'Invoice Date',
                        editType: 'datepickeredit',
                        format: { type: 'dateTime', format: 'dd/MM/yyyy' },
                        validationRules: { required: true },
                        defaultValue: new Date(),
                        width: 125

                    },


                    {
                        field: 'QuickBooksRef',
                        headerText: 'Quick Books Ref',
                        width: 125
                    },



                   

                    {
                        field: 'Subtotal', headerText: 'Subtotal',
                        allowEditing: false,

                        width: 100,
                        format: "C2",
                        defaultValue: 0
                    },

                      {
                          field: 'VAT', headerText: 'VAT',
                          allowEditing: false,
                          width: 100,
                          format: "C2",
                          defaultValue: 0
                    },


                    {
                        field: 'Total', headerText: 'Total',
                        allowEditing: false,
                        width: 100,
                        format: "C2",
                        defaultValue: 0
                    },

                    {
                        field: 'Notes',
                        headerText: 'Notes',
                        width: 400
                    }
                  
                ],

                childGrid: {
                    dataSource: orderInvoiceLineDataManager,
                    query: new ej.data.Query().where('OrderInvoiceId', 'equal', 'Id'),
                    queryString: 'OrderInvoiceId',
                    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
                    editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
                    columns: [
                           {
                        field: 'OrderInvoiceId',
                        allowEditing: false,
                        visible: false,
                 

                        },
                 
                        {
                            field: 'Id',
                            isPrimaryKey : true,
                            isIdentity: true,
                            headerText: 'Id',
                            allowEditing: false,
                            defaultValue: 0,
                            width: 100
                        },


                        {
                            field: 'Description',
                            headerText: 'Description',
                            width: 400
                        },

                        {
                            field: 'Quantity',
                            headerText: 'Quantity',
                            width: 100,
                            format: "C0",
                            defaultValue: 0
                        },

                        {
                            field: 'Subtotal', headerText: 'Subtotal',
                           

                            width: 100,
                            format: "C2",
                            defaultValue: 0
                        },

                        {
                            field: 'VAT', headerText: 'VAT',
                            
                            width: 100,
                            format: "C2",
                            defaultValue: 0
                        },


                        {
                            field: 'Total', headerText: 'Total',
                            
                            width: 100,
                            format: "C2",
                            defaultValue: 0
                        },
                    ],

                }   


            });

                invoiceLineGrid.appendTo('#InvoiceLineGrid');

1 Reply
TS Thavasianand Sankaranarayanan Syncfusion Team February 22, 2019 12:16 PM UTC

Hi Craig, 
 
Greetings from Syncfusion.  
 
Query : I am unable to get my child grid to load at all from a Odata 4 datasource.  
 
We have analyzed your query and we suspect that using older version of Syncfusion grid is the cause of this issue. So please update the Syncfusion components as mentioned in the below documentation. We also would like to suggest that using queryString property itself will have the parent-child grid data relationship, so using query property will not work in your case. Please refer to the below sample for your reference,  
 
 
  
If you want to make parent child mapping using different field names, then please go through the below location.  
  
  
Please get back to us for further assistance.  

Regards, 
Thavasianand S. 


Loader.
Up arrow icon