Open multiple grid records for editing on same window

I am going to transform an existing desktop application to web using either Ember or Angular 2. First I’ve to develop a POC.

I have been developing applications in Angular 1&2 since past two years. However, I have just started learning Ember couple of weeks ago.

As a newbie into Ember’s world I am finding it difficult to figure out how should I design my application. An overview of the requirements is given below:

On the main page show a grid of Products. On clicking a particular product record in grid I want to open that record for editing in a panel window which can be collapsed to the bottom or right like Bootstrap’s Accordion component. Please note that the grid should still be there and panel will simply overlap the grid and is close-able. Additional requirement is to allow the user to open multiple product records for editing in different panels.

Can somebody please give me a helping hand to figure out what’s the best way to achieve above requirements.

I think you can use to do this.

1 Like

Thanks @broerse. It seems very helpful. I will try it. Do you know any component which works similar to the “Reply” panel in this forum which you can resize/collapse and expand at the bottom.

No I don’t but you can dive in the source…

Is the source code available on GitHub or do you mean source code in browser console?

The initial aspect of this (opening a product record in a panel on the right) is known as a master/detail approach. There are tutorials on doing this that you can find (on my phone atm so won’t dig them up).

To make it collapsible, I was doing this for a client recently and found I needed to watch the internal router service (semi-private API) in order to accomplish it. Based on my computer property that was watching the current route, I would then change classes to change class names for my main grid while at the same time display a new route with the detail pane. It’s definitely doable but gets a tad trickier.