How to clone a ListGridField to create a FormItem

[jay.l.fisher]

I'm working on a bulk edit feature for ListGrids. I want to let the user select multiple rows in the grid and then present the editable grid fields in a form, showing the value from the first of the selected rows. The user can then edit the form fields and click an OK button to apply the form values to all selected grid rows.

When I create the FormItems I'm cloning the ListGridField using FormItem item = new FormItem(listGridField.getJsObj()). This seems to do the trick nicely. Even grid fields that are SelectItems with customized pick list criteria are cloned to be identical form items.

The only downside I've seen so far is that the FormItem also inherits the width and alignment of the ListGrid column. In most cases this is OK, but often the grid column is narrower than it should be and I want to make the FormItem wider. Also alignment in some columns has been set to "right" which causes the FormItem to be right-aligned in the form.

If I change the FormItem alignment it also changes the ListGridField alignment. So I suspect my "cloning" is not actually resulting in a new jsObj after all.

Is there a better way to clone a ListGridField to create a *new* FormItem?

[Isomorphic]

Right, new FormItem() does not result in a copy of the JavaScript object, it just gives it a new GWT wrapper object.

We'd recommend just creating a list of properties you actually *do* want to copy and iterating over those using getAttribute()/setAttribute() to copy them from the ListGridField to a *new* FormItem. This will also solve the problem of undesired properties applied to the FormItem.

[jay.l.fisher]

Still trying to come up with a technique that will work well in all cases, without having to explicitly copy selected properties. When ListGrid starts editing a row it creates a DynamicForm with FormItems for that row. I would like to create a form just like that one, but display it in a different context. Is there any way to invoke the same logic that ListGrid uses to create that form or the FormItems that it creates?

[Isomorphic]

There's no supported way to make use of that same method. The internal framework code basically creates a new FormItem configuration block, copies various attributes across, and also applies certain things that are ListGrid specific, such as sizing info and event handling logic. Even if you were to call the internal method, the returned configuration wouldn't really be appropriate to attempt to show as a new FormItem outside the grid.

Your options would seem to be:
- For basic stuff - field name, title, dataType, etc, could you not simply have a DataSource for the grid, and bind your edit form to the same dataSource?

- Alternatively, the suggested solution of directly applying the properties from the field to the generated form fields -- either using Java to explicitly get and set the various properties you care about (name, type, etc), or dropping to JSNI to explicitly loop through some list of attrs on the field JS object and apply it to a new config object.

- Or, you could perhaps come up with a solution with a custom method on the LG which builds the config for both cases. Perhaps a subclass of ListGrid with a custom method which creates and returns a set of fields with the appropriate JS objects. You could then call this method on ListGrid init and use setFields to set up the LG fields, and then call this same method to rebuild the set of fields and apply the result to your edit form. No need for iterating through properties of the live grid.

Hopefully you can come up with an approach which will work for you

Regards
Isomorphic Software