Can I add a form (or another widget) into the body part of a ListGrid

[wallytax]

I'm trying a concept where I want a DynamicForm next to the records of a ListGrid. The ListGrid contains a text column that shows a comma separated list of values. If I select the row, I need to show a form with each possible value as check box. Every check box that I click needs to add/remove a value to/from the comma separated list of values. The goal is to avoid as many click actions as possible (it's needed to add product specifications fast).

I tried a SelectItem as editor type (with multiple: true), but I need a click to close the editor and another click outside the row to save the record. I also have difficulties converting the single comma separated list of values into multiple values for the SelectItem and after saving, have it convert it back to the single list of values column.

I have a construction with a HLayout including the grid and form and that is the best so far, but it has a disadvantage: I'm including grids inside another component and that component expects a "grid like" component. Now, I'm creating methods with similar names inside the HLayout based component that make it act like a grid. This probably is the wrong approach?!

Hopefully this makes any sense and can someone point me into the right (or better) direction.

By the way, I need to add a comment that the grid component I already have uses extra gridComponents (in my case an extra toolbar in the top). As far as I know, these components can only be stacked vertically and by no means in the same "row" as the records component (the grid body and - if applicable - the frozen body).

[Isomorphic]

It's a little unclear where you want this form. On the one hand you say you "want a DynamicForm next to the records of a ListGrid", which sounds like outside of the grid, but then you discuss editorType:"select", which would be within the grid. Which is it? Or are you considering both implementations?

For within the grid, there are multiple approaches:

1. normal editing plus accelerators - if it's opening SelectItems in one click that is the main requirement, you can just auto-open the pickList on editorEnter. canToggle can be used to make boolean fields editable with one click. Other approaches exist for other types of editors

2. alwaysShowEditors:true - this basically shows the configured editorType in the column for every row, so it takes just one click to edit values, but has limitations on what editorTypes are allowed

3. showRecordComponents - allows you to put a Canvas in every row in any cells, so can also be used to make a more-immediate editing experience

[wallytax]

First of all, thanks for the quick reply!

I've managed to create two screenshots from real components, but not working as desired, but it gives an impression of what I want.

Unselected record:


Selected record:


Unfortunately, both forms are not equal in size in both screenshots, but they should be in reality. Hopefully, this gives an idea of my thoughts.

[wallytax]

It would at least help me out a lot if I could use the grid component that I already have and add a form next to it. The toolbar may also be shown above the records but next to the form. So basically, then I'm asking if it is possible to add a component to the grid component within its outer container.

[Isomorphic]

OK, so if we understand correctly, you are just trying to achieve an ordinary form next to a ListGrid, something easy to achieve with an HLayout, but the reason you're asking if that you have factored your code in such a way that's it's a major upheaval if something other than a listGrid appears in a particular position in your component hierarchy, right?

Well, #1 our suggestion would be: just fix your code. It seems like you somehow conflated a grid's role in managing data with a component's position in a layout, so they are inseparable in your code. But you could separate them by having your code hold onto both a grid instance and an unspecified Canvas container instance (which may be the grid directly or may just be a container for the grid and other things) and calling appropriate APIs on each: data-related stuff on the grid, layout-related stuff on the Canvas container.

Or, perhaps better, build a well-thought-out interface between this grid or grid+form component, and whatever has a dependency on it. The way your current code really needs the component to be a grid suggests that encapsulation isn't being carefully maintained.

However, with great reluctance, we can give you a hack to get out of your dilemma without refactoring: you can just set layoutRightMargin on the grid, and space will appear to the right of all the built-in gridComponents. Place your form there, as a non-member child of the ListGrid. Using snapTo:"R" and height:"100%" is the easiest way to position it, plus whatever width you choose (same value as layoutRightMargin).

It will be fixed-size (unless you dynamically adjust the layoutRightMargin and form width somehow), so not as good as an HLayout containing a grid and form, but it will work.

[wallytax]

Thanks a lot, the first comment you gave just crossed my mind: the component containing the grid is too tightly coupled to that grid. I might be able to refactor that without breaking the other grids that don't need a form.

The second "hack" might be a quick win for now. I like solid solutions, but for this occasion this might just what I need.

So thanks a lot!

[wallytax]

I understand your reluctancy, but maybe you have a simple fix for the following screenshot. I have added a backgroundColor: 'yellow' to show the issue. The header is 100% width, even though the grid has layoutRightMargin: 300.

[Isomorphic]

Looks like the code to do the layout of the header overrides the default layout code, which is applied for the other gridComponents.

This isn't really a bug, and the only possible use would be enable a hack like yours, so sorry, it could be logged but would receive such a low priority that it's not plausible that it would be fixed.

You could however create similar space by applying right padding.

[wallytax]

Fair enough, however could you give me hint on where to apply that padding? The whole grid or a specific column header? Or the whole header? (is that an auto child of the grid)?

[Isomorphic]

The whole grid, right-side only so it has to be done via CSS, not JS settings.

[wallytax]

Just as feedback for anyone interested: I've created a new component subclassing HLayout that includes a ListGrid and a form. I've refactored the creation of auto children (that I used to build via addAutoChild()) to use "memoizable" methods (that internally use createAutoChild()). Instead of using this.grid, I'm using this.getGrid() whenever I'm referencing the grid. That methods creates an instance variable upon first call and returns that instance each consecutive call.