Row Detail with inner Grids

[ghiscoding]

@jr01 @zewa666 hey guys, I'm currently working on Row Detail with inner Grids for the past 2 weeks and got most of it working but I was wondering if you guys know of any ways to maybe cache dynamically created component and reapplied them to target element? What do I mean by this? Let's step back a little to understand the problem, SlickGrid uses Virtual Scroll, which mean that anytime you scroll, any rows that gets out of the viewport are just being discarded and recreated only when that row gets back in the viewport when scrolling. So going back to Row Detail, anytime that we scroll and some of the Row Detail gets out of the viewport, it uses the same technique of discarding (or destroying in our use case) and the problem behind this is that with inner grid and certain actions are done in that inner grid, well.. this new state will be lost when the Row Detail is being destroyed and eventually scrolled back into the viewport. So I was wondering if we could somehow keep the dynamically created component instance in a cache and then reapply that instance whenever it comes back into the viewport (side note, for Row Detail, I created my own Angular util to create dynamic component)

Angular-Slickgrid/src/app/modules/angular-slickgrid/services/angularUtil.service.ts

Lines 48 to 58 in d058102

	/**
	* Dynamically create an Angular component, user could also provide optional arguments for target, data & createComponent options
	* @param {Component} component
	* @param {HTMLElement} [targetElement]
	* @param {*} [data]
	* @param {CreateComponentOption} [createCompOptions]
	* @returns
	*/
	createAngularComponent<C>(
	component: Type<C>,
	targetElement?: Element,

Are there anything else we can do if caching doesn't work? Yes, we can use the Grid State/Presets (possibly using Session Storage) and save/reapply when in/out of viewport... however that would have to be implemented by the developer (not by the library)

So anyway, just thought of asking for feedback :)
Starting to be really close to be on par with paid grids (Ag-Grid, SyncFusion, ....)

[zewa666]

didnt have this use case so far. we show a nested grid in a modal bit we're using iframes ;)

the only thing to adress your problem I could think off is a listener for viewport change + presets as you mentioned

[ghiscoding]

nested grid in a modal? is that just another way of saying a grid shown in modal window or am I not understanding it correctly? iframe is still quite powerful, I rarely think about that option :)

[zewa666]

I was young and needed the money 😂

for our auto-grid system we have something called related grids. e.g all foreign key table are related grids accessible by an admin so he/she can manipulate the lookup data. some of these related grids are shown as grid others as form based of the same column config.
but since all have the entry grid as same basis and are hence prefiltered on its fk, it made sense to pop up a modal with a sidebar navigation.

instead of going through hassle of nested styling issues etc we opted for iframes. cheap, but works ;)

[ghiscoding]

yeah ok, so it's just Master/Detail grids (2x grids), 1st grid controls the 2nd grid. That's typically what I do as well, easy to implement and never fails (Row Detail is a little finicky for things like above and others)

[jr01]

If I take Angular out of the picture for a moment and if I understand correctly, the problem is that some (html) Elements are complex/expensive to (re)-create and they should not be removed from the DOM when they get outside the viewport.

If so, then you need (1) a way to know you shouldn't do that and (2) move the element to an invisible stash when it's outside the viewport and restore the element when the row gets visible again.

1. some javacript service within the grid where you register that Element.

probably this should remember the row/column in the grid, so it can be used when restoring.

2. when the object gets outside the viewport move it in javascript

E.g.

<angular-slickgrid>
	<div class="gridPane" ...>
		<div class="slickgrid-container">
			...
			<div class="stash">
			</div>
		</div>
	</div>
<angular-slickgrid>

.insertBefore(stashElement, theRegisteredElementThatShouldNotBeDestroyed) or something to move the things around.

and a css style on slickgrid-container.stash to make things invisible.

[ghiscoding]

hmm yeah I didn't think about moving that elsewhere in the DOM, that might be a possibility but currently that is not what Row Detail does, anytime it goes out of the viewport (no longer visible) it gets destroyed and then recreated whenever it comes back in the viewport. I wasn't thinking much about this action being expensive but more of an action that doesn't keep the Row Detail state when it gets destroyed/recreated. For example, if you have a form in a Row Detail and you fill in some form inputs, then you scroll down (out of the viewport) then the Row Detail would get destroyed and you lose all form inputs... and that happens because of SlickGrid Virtual Scroll.

Storing the Row Detail elsewhere in the DOM could be an option but I wonder if all component states and JavaScript code remains intact or not!? I guess it does but then if you do keep this somewhere in the DOM, then moving that to the body for example would bring a whole different kind of problems around the position and stuff (it would no longer follow the row unless code is put in place to make it follow the row whenever you scroll, it would need repositioning). I'm not sure that I want to go that route though, it would take a lot more code change and I'm not sure that the position would be really good and perf might not be the best either. It's not really what I had in mind when I said caching though, it was more of a "when it gets out of viewport, then keep the full component in a cache somewhere with its current state and then reapply this component when it comes back to the viewport", but it's possible that what I had in mind isn't feasible.... anyway your suggestion might be something to test in the future but probably not now at the moment though.

So I think that at this point, I will just go with the easier approach to save Row Detail Grid State like Filters/Sorting when it becomes out of the viewport (before destroying the component) and then recreate the component & grid with Grid Presets when it comes back into the viewport... that wouldn't keep form inputs though, but the grid would be the same as if you never left it, which is probably what most users would do anyway

[ghiscoding]

oh perhaps another thing we could do, which is maybe what you had in mind, is to move the element into a stash and then take it from the stash and move it back into the Row Detail container. I'm not sure if the JS code and state will be kept but that could be interesting to try.

[zewa666]

you are talking about component portaling. in angular via cdk https://material.angular.io/cdk/portal/overview and react createPortal hook https://react.dev/reference/react-dom/createPortal

in Vue it should be this https://vuejs.org/guide/built-ins/teleport.html

[ghiscoding]

ahhhh that is really interesting, I did read very quickly about Vue Teleport before, but I never really looked into the use cases and how these could be used, but now it all start to make sense. Thanks a lot for this info. That could definitely be something to look into in the future, however for now I got it working with Grid State/Presets saving in Session Storage and so I'll continue with that approach for now.

I'd be really happy to receive PR contribution for that approach in the future.

[ghiscoding]

I pushed a new version v8.13.1 which now provides Row Detail with inner Grid in a new Example 45. It uses inner Grid State/Presets since that was easy to implement. I might give a try to what @zewa666 suggested above in the future, not sure when, but for now I think it's good enough. And that is it, another feature completed 🚀

Cheers and thanks for the feedback