Our blazing fast Grid component built with pure JavaScript


Post by henrique »

My question is whether there is a form of master control and detail with the Store.

The implementation I want to do is have one grid with orders and another with the order items. When you select an order, I would like the detail grid to show the items for that order.

Is there anything ready to do that?


Post by alex.l »

Hi henrique,

We do not have a demo, but it may be easily implemented using Grid events. As example, load data on row select
https://bryntum.com/docs/grid/api/Grid/view/mixin/GridSelection#event-selectionChange
https://bryntum.com/docs/grid/api/Core/data/AjaxStore#function-load

All the best,
Alex


Post by henrique »

Thanks for the reply, I will try it!


Post by henrique »

I did the test, and it worked, but I was in doubt, is there an automatic way to make this work?


Post by johan.isaksson »

Hi,

There is no automatic way no, I would use the approach suggested by Alex above, populating the order items store based on which row gets selected in the orders grid.

You could possibly also have the order items in an array on the order, and then use that local data to populate the order items store instead of having to make an ajax request for them. Something like this (pseudo code, not really working as is):

const orders = [
  {
    id : 1,
    title : 'Small order',
    items : [
      { id : 1, title : 'Item 1' },     
{ id : 2, title : 'Item 2' } ] }, ... ]; orderGrid.store.data = orders; orderGrid.on({ selectionChange() { itemsGrid.store.data = selected.items; } });

That would probably work well for a read-only order items view, but would require some work to get it working for an editable one. In the end I think it would be more complicated to implement than what Alex suggests.

Best regards,
Johan Isaksson

Post by henrique »

Ok! Thanks.


Post Reply