Grids inside grid implementation

[preeti_kanyal]

Hi Isomorphic Team,
We are using the ismorphic version : 6.1-p20170930
my current functionality uses SmartGWT + Spring Rest services.
We are using Google chrome browser latest version.

I want to implement grid with another grids/tables embedded inside the grid .
e.e. below column2, column3 and column4 belong to internal grids.

Below for the first record 'test34' , internal grid (internal grid 1) has 2 records.
for record 'test', internal grid (internal grid 2) has 4 records
and for record 'test12', internal grid (internal grid 3) has 3 records

Also i want to give user option to add/edit/delete records separately in any of the grids (any internal or external).
so user can add/edit/delete records to internal grid 1, internal grid 2, internal grid 3 or external grid.

Column1	Column2	Column3	Column4	Column5	Column6
test34				test34	test34
test				test	test
test12				testr	test

Attached is the screenshot where i just tried spanning to achieve same look but add/edit/delete separately in internal and external grids in not achievable that way.

Could you please suggest how I can proceed to achieve above.

[Isomorphic]

See listGrid.showRecordComponents - this will allow you to embed grids inside other grids, and the interior grids can have a completely separate editing interaction.

[Blama]

Hi preeti_kanyal,

I wanted to suggest the same, in combination with showRecordComponentsByCell, as you want to have many ListGrids
I'm not sure though if you can have a internal grid spanning many columns of the external grid, though. I assume this is not the case.

Isomorphic: Perhaps that is a possible (no priority for me) enhancement. "showRecordComponentsByHeaderSpan", where one could group ListGridFields into a headerSpan and have a recordComponent per headerSpan.

Best regards
Blama

[preeti_kanyal]

Thanks Blama/isomorphic.
I could embed grids inside other grid with above.

Few questions about performance and tabbing behavior:

In my use case all the tables will be rendering data from different tables in database. I am afraid about the rendering time of my page with these components.
I would not like my page to take more than 2.5 seconds to render. Could you please suggest with how many components i should limit my page to?

Also the default tab behavior is that the control don't go to the embedded grid on tabbing but i want control to go to embedded component of the cell if it has one . Could you please suggest if SmartGWT supports this behavior?

[Isomorphic]

Default tabbing behavior will go to embedded grids. If you're not seeing this, please post a minimal, ready-to-run test case demonstrating the problem.

There is no way to give a component limit, since it depends on browser, OS, versions, configuration of components (including things such as formatters), and many other factors. Just make sure you have *read the docs*, especially the advice about using recordComponentPoolingMode:"recycle", and not using recordComponents in situations where they are unnecessary. Please read these particular docs multiple times - they are very important and information dense.

[preeti_kanyal]

Hi isomorphic,
I have implemented a grids with 100 rows .
50 grid rows have internal grids in one of the cell. (total 51 grids)
I have got data of all the 50 internal grids before start of the outer grid and put that data into a map. Later I am doing grid.setData() for all the internal grids inside createRecordComponent.. (So only 2 client - server calls.)
internal grids have only 2 -3 rows. and at one time, display area has around 7 - 8 grids.

Page loads quickly (less than 2 sec).

The issue i am facing is slow scrolling performance .
Each time I scroll on the page fast , the rendering is very slow. (I could see each time createRecordComponent getting executed while scrolling. )
Is there a way to make the scrolling behavior fast?

[Isomorphic]

Did you see ListGrid.setRecordComponentPoolingMode()? You probably want RecordComponentPoolingMode.DATA.

Note that this won't be fast, because the 50 internal grids will be pre-created.

[preeti_kanyal]

Thanks Isomorphic.

Scrolling performance is better with setting : grid.setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE)
but still its not matching the required performance.
Could you please suggest any other way to achieve the above structure or any similar structure fulfilling my requirement ?

Problem:
I have door records(.Outer grid).
Each door has multiple locks (currently 0 -3).
I want to display all the records (door + locks) simultaneously.
Also user wants to add/edit/remove doors and locks independently.

(Nested grid is not the solution for me as in that user has to click on the door to see associated locks. )

[Blama]

Hi preeti_kanyal,

you could always manipulate the dataset and instead display data from a view "select doors union select doors join locks" and generate a synthetic primaryKey from customSelectExpression="door.id ||'-'||lock.id".
Then force sort by door.id, lock.id, so that you have always your entries in the correct order.
You can then hide all normal field content when in a lock-row.

In the DS DMI on the server watch for the type that is being edited and route the edit to the lock or the door table as needed.

Most likely you'll hit others bumps going that route, but they should all be solveable and will not be performance related.

Best regards
Blama

[preeti_kanyal]

Thanks Blama.
That sounds a great solution for displaying all the data (locks + doors) simultaneously.

But in my problem statement: User also wants to do 'add/delete' operations independently for doors and locks.

Adding door should be fine.
But when user wants to add lock, he would want to insert only lock information and that lock should be linked to the corresponding door.
With createRecordComponent() that's easily achievable (adding/removing rows in both the grids separately.) but i don't think with this approach this could be done.

Please suggest?

[Blama]

Hi preeti_kanyal,

as written, you can recognize door-rows: In those, in some column offer a button to open a "Add lock" window. You have the door_id in the ListGridRecord.
For remove, use addRemoveClickHandler() and call different DMI depending on the row-type.

Best regards
Blama

[preeti_kanyal]

Thanks Blama.
I will try this.