PDA

View Full Version : Reorder rows with DND on a grouping grid



Nico33
14 Jan 2010, 10:49 AM
Hi all,

I'm trying to reorder the rows of a grouping grid, but only in the same group.

First, I'm trying to know what is dropped and where. So i'm adding a listener on the dragDrop event.

I can get the dragged elements with :


target.addDNDListener(new DNDListener()
{
public void dragDrop(DNDEvent e)
{
if (e.getData() instanceof List<?>)
{
List<Stock> list = (List<Stock>) e.getData();
}
}
}
But I'm unable to know where it is dropped. If I use :


Element dst = e.getTarget();
int row = grid.getView().findRowIndex(dst);
row is always equal to -1 and of course

grid.getStore().getAt(row)is never good

When I'll be able to know what is dropped and where, I will change the values of the objects, reorder the store and refresh the view.

This is my complete code (based on the GroupingGridExample sample) :


public class GroupingGridExample extends LayoutContainer {

@Override
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.setShowGroupedColumn(false);
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 + ")";
}
});

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

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

add(panel);

new GridDragSource(grid);

GridDropTarget target = new GridDropTarget(grid);
target.setAllowSelfAsSource(true);
target.setFeedback(Feedback.INSERT);
target.addDNDListener(new DNDListener()
{
public void dragDrop(DNDEvent e)
{
if (e.getData() instanceof List<?>)
{
List<Stock> list = (List<Stock>) e.getData();
/*for (Stock s : list)
MessageBox.alert("", s.getName(), null);*/

Element dst = e.getTarget();
int row = grid.getView().findRowIndex(dst);
MessageBox.alert("", String.valueOf(row), null);
}
}
});
}
}Maybe there's a better (and simpler) solution.

Thanks in advance for any help.
Best regards

vbjain
8 Apr 2010, 4:46 AM
I am also facing the same issue. Any help?

Nico33
8 Apr 2010, 5:49 AM
please see this http://www.extjs.com/forum/showthread.php?t=89871 and this http://www.extjs.com/forum/showthread.php?t=90903