Multiple editable grid with a single store

[user2022]

Hello,

I have multiple grid with the same columns layout, the only different is that I have a column which is for filtering. Ex:

COLUMNS
Product Type
Product Name
Description
Unit price

Data returned from the server: we have virtual product and physical one, i want 2 grids in the same page which says: physical product and virtual product where user can input data into those 2 grids and then send the modified rows to serve for updating.

instead of having 2 separated store loading data in 2 thread, i want to load data only in 1 thread and then do some filter magic in the client side for separate the data into 2 grids, and then reflect the data change in 1 master store only for sending back to the server for updating.

Please show me how to do this.

Thanks a lot in advance.

[fabricio.murta]

Hello, @user2022!

You can have two grids using the same store. When you apply a filter to one grid (a view filter), it creates a "virtual store" with the filtered data, so I believe you won't have a problem doing that.

Please take a look at our Grid Panel examples, as there are many examples that may do just as you want.

There's also this store binding example, a good starting point:
- Data Binding - Basic - Chaining Stores

Depending how you filter -- that is, if that's a store-level filter, you might require separate stores. In order to populate one with the other's data, you can just chain an event in the store, for when it gets data, then populate the second one via JavaScript, so no duplicate data download would be necessary at all. It would be something like:

App.GridPanel2.getStore().loadData(App.GridPanel1.getStore().proxy.data);

To duplicate the data from one grid to another. The way to get the raw source grid data may change depending how you populate it. In that case, the grid is populated using a StoreRead event (OnReadData=) like in this ArrayGrid example.

Hope this helps!