DND on Grid with GroupingView cannot change group

[jschwarz0]

Hi,

I am having a problem doing dnd on a grid with a grouping view.
Using the sample "Grids->Grouping" and adding a couple of dnd lines
you can drag items around but they will not "stick" in their new locations.
(The underlying model is not getting changed to the new group so just a
ChangeListener won't work).

I obviously could update the model using a custom GridDropTarget but I cannot figure
out how to get the new group from any of the arguments.

Does anyone know how to do this?

(I thought this was a bug so I cross-posted this issue here:
http://extjs.com/forum/showthread.php?t=67997)

Thanks,
Jim

How to repro:

1) open the "Grids->Grouping" example in your favorite editor and make it support dnd (see code below, just 4 lines added).
2) run
3) drag "Intel" from Computer to Finance
4) note nothing happens as the underlying model does not get changed

---

protected void onRender(Element parent, int index)
{
super.onRender(parent, index);

setLayout(new FlowLayout(10));

GroupingStore<Stock> store = new GroupingStore<Stock>();
store.add(TestData.getCompanies());
store.groupBy("industry");

ColumnConfig company = new ColumnConfig("name", "Company", 60);
ColumnConfig price = new ColumnConfig("open", "Price", 20);
ColumnConfig change = new ColumnConfig("change", "Change", 20);
ColumnConfig industry = new ColumnConfig("industry", "Industry", 20);
ColumnConfig last = new ColumnConfig("date", "Last Updated", 20);
last.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));

List<ColumnConfig> config = new ArrayList<ColumnConfig>();
config.add(company);
config.add(price);
config.add(change);
config.add(industry);
config.add(last);

final ColumnModel cm = new ColumnModel(config);

GroupingView view = new GroupingView();
view.setForceFit(true);
view.setGroupRenderer(new GridGroupRenderer()
{
public String render(GroupColumnData data)
{
String f = cm.getColumnById(data.field).getHeader();
String l = data.models.size() == 1 ? "Item" : "Items";
return f + ": " + data.group + " (" + data.models.size() + " " + l + ")";
}
});

Grid<Stock> grid = new Grid<Stock>(store, cm);
grid.setView(view);
grid.setBorders(true);

// 4 new lines
GridDragSource gds = new GridDragSource(grid);
GridDropTarget gdt = new GridDropTarget(grid);
gdt.setAllowSelfAsSource(true);
gdt.setFeedback(Feedback.INSERT);

ContentPanel panel = new ContentPanel();
panel.setHeading("Grouping Example");
panel.setIconStyle("icon-table");
panel.setCollapsible(true);
panel.setFrame(true);
panel.setSize(700, 450);
panel.setLayout(new FitLayout());
panel.add(grid);

add(panel);
}

[sven]

You can listen to the drop event. Get the target of that event and find the according index in the store. Than you can get the group of that model and change the group of your dropped model.

[jschwarz0]

ok, sounds good.
in 2.0m1 "dropTarget" is null.
Is that a known problem?
thanks,
jim

----

drop event:

event DNDEvent (id=68)
cancelled false
component EditorGrid<M> (id=82)
data ArrayList<E> (id=84)
dragEvent DragEvent (id=88)
dragSource GridPageDragSource (id=63)
dropTarget null
el null
event JavaScriptObject$ (id=91)
operation DND$Operation (id=93)
source GridPageDragSource (id=63)
status StatusProxy (id=98)
type null

[sven]

event.getTarget()

[jschwarz0]

sven,

thanks for the help on this!

it works very well, but...

If you do:

Element dst = event.getTarget();
int row = grid.getView().findRowIndex(dst);

row is correct unless you drop at the very bottom of the group.
then you get row = -1.

thoughts?
want me to post some code?

jim

[sven]

El dst = ce.getTarget(".x-grid3-row", 5);

Try that.

[jschwarz0]

hi,

thanks for the response, but...

El dst0 = event.getTarget(".x-grid3-row", 5);

dst0 is ok in the middle but null at the bottom.

thanks,
jim

[sven]

At the bottom of what? The group? The grid?

The selector i gave you wont work if you drop on the groupheading. You have to adjust that to get the correct row.

[jschwarz0]

In the "Grouping Example", the code 'event.getTarget(".x-grid3-row", 5)' works if you drag 'Intel' between 'American Express' and 'Citigroup' but not if you drag 'Intel' to just under 'JP Morgan'.

The code from GridView.insertRows() is different for this case but I am not sure how to account for it.

Element before = getRow(firstRow);
if (before != null) {
DomHelper.insertBefore((com.google.gwt.user.client.Element) before, html);
} else {
DomHelper.insertHtml("beforeEnd", mainBody.dom, html);
}


thanks,
jim