[REACT] Subgrid with nested data

[himanshurjoshi]

This is runnable code. Please look into this.

code.zip

(726.26 KiB) Downloaded 16 times

[tasnim]

Hi,

Thanks for the runnable test app.

Please follow the suggestions below.

1. The foreignKey should be the field in a Model that has the id of a related Model. I the "OrdersDetail" Model, there should be a poSalesOrderId or something similar, that points to the related "POSalesOrder's" id
2. That field should also be used as the foreignKey of the relationship between "OrdersDetail" and "POSalesOrder"
3. The "OrdersDetail" Model should have it's own unique identifier id
4. The "Deliveries" Model should have a field that points to the related "OrdersDetal's" id . Something like ordersDetailId
5. That field should be used as the foreignKey of the relationship between "Deliveries" and "OrdersDetail"
6. The dataField for the out-most grid (containing "POSalesOrder") rowExpander should be orderRows
7. The dataField for the middle grid (containing "OrdersDetail") rowExpander should be deliveryRows

And about this

    return orderRows.reduce((acc: any, r: any) => acc + r.OrderTotalAmount, 0);

you should use this.orderRows

If you have any questions please let us know

Best regards,
Tasnim

[himanshurjoshi]

I used this.orderRows but still getting error

Screenshot 2024-02-19 165214.png (50.09 KiB) Viewed 127 times

[tasnim]

Hi,

Please check the edited app attached below (with that error solved)

[himanshurjoshi]

Thank you, I downloaded your code and applied some changes to show children data and its working.
Now the problem is, parent row data s not refreshed when changing child row data. Actually, in parent row, there is a column TotalAmount which is calculated on the basis of children row's data. Whenever I am changing value in child row it should recalculate parent row TotalAmount field, but its not calculating on change instead it calculating when I collapse parent row.
In Bryntum example (https://bryntum.com/products/grid/examples/nested-grid/) its calculating parent row field as on change in child row.

Sample code is here

code.zip

(721.15 KiB) Downloaded 9 times

[joakim.l]

Hi!

The RowExpander listens to the expanded Grid's store for changes, and redraws the expanded row. But that only works for one level of nesting, and you have two.

I've created a ticket to fix this (I was actually working on it when you posted this): https://github.com/bryntum/support/issues/8671

Workaround (sorry for bad typings):

// Ordergrid.tsx
rowExpander: {
   refreshOnRecordChange: false,
   column: {
      renderer: (data: any) => {
          data.cellElement.classList.add('hide');
      },
   },
   // enableAnimations: false,
   dataField: 'deliveryRows',
   renderer: (event: any) => {
      return InvoiceGrid({
         record: event.record,
         amountRenderer: amountRenderer
      });
   },
   listeners : {
      expand(data : any){
         const salesOrderGrid = (this as any).client.owner;

     data.widget.store.on({ 
        update(){
            salesOrderGrid.refreshRows();
        }
     });
  }
   }
}

[himanshurjoshi]

Its working as expected, Thanks for your help