PDA

View Full Version : Multiple selected strange behavior in a single selection grid



anasande
29 Dec 2010, 2:27 AM
Hi. I'm experimenting some problems with a paged simple selection grid with checkboxes. If I play cliking on different rows of my grid results, when I change the page the grid shows with all that rows selected, eventhough I defined it as SelectionMode.SIMPLE. I tried to fix it forcing to deselect all rows with grid.getSelectionModel().deselectAll() after grid recharge, but it didn't work.

Here you have my grid code:


private Grid<MyObjectDTO> createGrid() {

cm = columnsConfiguration();
final Map<String, Object> param = new HashMap<String, Object>();
param.put("parameter",myParameter);

RpcProxy<PagingLoadResult<MyObjectDTO>> proxy = new RpcProxy<PagingLoadResult<MyObjectDTO>>() {

@Override
protected void load(Object loadConfig,
AsyncCallback<PagingLoadResult<MyObjectDTO>> callback) {
tiService.findResults((PagingLoadConfig) loadConfig,
param, callback);
}
};

// loader
final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(
proxy);
loader.setRemoteSort(true);

ListStore<MyObjectDTO> store = new ListStore<MyObjectDTO>(loader);

bottomToolBar.bind(loader);

grid = new Grid<MyObjectDTO>(store, cm);

grid.addListener(Events.RowClick,
new Listener<GridEvent<MyObjectDTO>>() {

public void handleEvent(GridEvent<MyObjectDTO> be) {
Integer selected = be.getRowIndex();
MyObjectDTO ej = be.getGrid().getStore().getAt(
selected);

// Some checking code in the selected item

}
}

});

grid.addListener(Events.Attach,
new Listener<GridEvent<MyObjectDTO>>() {
public void handleEvent(GridEvent<MyObjectDTO> be) {
PagingLoadConfig config = new BasePagingLoadConfig();
config.setOffset(0);
config.setLimit(elementsPerPage);

Map<String, Object> state = grid.getState();
if (state.containsKey("offset")) {
int offset = (Integer) state.get("offset");
int limit = (Integer) state.get("limit");
config.setOffset(offset);
config.setLimit(limit);
}
if (state.containsKey("sortField")) {
config
.setSortField((String) state
.get("sortField"));
config.setSortDir(SortDir.valueOf((String) state
.get("sortDir")));
}
loader.load(config);
}
});

grid.setLoadMask(true);
grid.setBorders(true);

selectionModel.bindGrid(grid);
return grid;

}

// Grid column configuration
private ColumnModel columnsConfiguration() {
List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

selectionModel = new CheckBoxSelectionModel<MyObjectDTO>();
selectionModel.setSelectionMode(SelectionMode.SIMPLE);
configs.add(selectionModel.getColumn());

ColumnConfig column = new ColumnConfig();

column = new ColumnConfig();
column.setId("idMyObject");
column.setHeader("id");
column.setWidth(70);
configs.add(column);

column = new ColumnConfig();
column.setId("description");
column.setHeader("description");
column.setWidth(300);
configs.add(column);

return new ColumnModel(configs);

}

Can anyone help me? Thank you very much in advance.

sven
29 Dec 2010, 3:08 AM
Can you please post some small testcase that implemenst EntryPoint and shows the problem? You can also give me a hint how to change this example to show this problem: http://www.sencha.com/examples/explorer.html#localpaging

Also when you only want one model to be selected at any given time, you need ot use SelectionMode.SINGLE.

anasande
29 Dec 2010, 4:06 AM
Here is my entry point:




public class MyGridPage implements EntryPoint {

//Some variables definition
// ....


public void onModuleLoad() {

main = new LayoutContainer();

initFields();

}

private void initFields() {

// Some buttons inicialization code ....

FormLayout layout = new FormLayout();
layout.setLabelWidth(100);

filterPanel.addButton(filterButton);
filterPanel.setButtonAlign(HorizontalAlignment.RIGHT);
filterPanel.addListener(Events.OnKeyPress,
new Listener<ComponentEvent>() {
public void handleEvent(ComponentEvent ce) {
if (ce.getKeyCode() == KeyCodes.KEY_ENTER) {
if (ce.getKeyCode() == KeyCodes.KEY_ENTER) {

doSearch();
grid.getSelectionModel().deselectAll();

}
}

}
});

ContentPanel cpGrid = new ContentPanel();
cpGrid.setLayout(new FitLayout());
cpGrid.setHeaderVisible(true);
cpGrid.setCollapsible(true);
cpGrid.setBorders(false);
cpGrid.setHeading(locale.lblTituloGridEjercicio());
cpGrid.setWidth(-1);
cpGrid.setAutoWidth(true);
cpGrid.setButtonAlign(HorizontalAlignment.RIGHT);
cpGrid.setAnimCollapse(false);

cpGrid.addButton(bt1);
cpGrid.addButton(bt2;
cpGrid.addButton(bt3);
cpGrid.addButton(bt3);

grid = createGrid();
grid.setAutoWidth(true);
grid.setAutoHeight(true);
grid.getAriaSupport().setLabelledBy(
cpGrid.getHeader().getId() + "-label");
grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
grid.getAriaSupport().setLabelledBy(cpGrid.getId());
grid.setStripeRows(true);
grid.getView().setAutoFill(true);
grid.getView().setEmptyText(locale.msnGridVacio());
cpGrid.add(grid);

main.add(filterPanel, new FlowData(0, 10, 0, 10));
main.add(cpGrid, new FlowData(10, 10, 0, 10));
cpGrid.setBottomComponent(bottomToolBar);

RootPanel.get("my_grid_page").add(main);
}


private void doSearch() {
final Map<String, Object> param = new HashMap<String, Object>();
cm = columnsConfiguration();

param.put("idEjercicio", ejercicio);
param.put("descripcion", descripcion);

RpcProxy<PagingLoadResult<MyObjectDTO>> proxy;

proxy = new RpcProxy<PagingLoadResult<MyObjectDTO>>() {

@Override
protected void load(Object loadConfig,
AsyncCallback<PagingLoadResult<MyObjectDTO>> callback) {
service.search((PagingLoadConfig) loadConfig,
param, callback);
}
};



final PagingLoader<PagingLoadResult<ModelData>> loader = new BasePagingLoader<PagingLoadResult<ModelData>>(
proxy);
loader.setRemoteSort(true);

ListStore<MyObjectDTO> store = new ListStore<MyObjectDTO>(loader);

grid.reconfigure(store, cm);

grid.addListener(Events.Attach,
new Listener<GridEvent<MyObjectDTO>>() {
public void handleEvent(GridEvent<MyObjectDTO> be) {
PagingLoadConfig config = new BasePagingLoadConfig();
config.setOffset(0);
config.setLimit(elementsPerPage);

Map<String, Object> state = grid.getState();
if (state.containsKey("offset")) {
int offset = (Integer) state.get("offset");
int limit = (Integer) state.get("limit");
config.setOffset(offset);
config.setLimit(limit);
}
if (state.containsKey("sortField")) {
config
.setSortField((String) state
.get("sortField"));
config.setSortDir(SortDir.valueOf((String) state
.get("sortDir")));
}
loader.load(config);
}
});

loader.load(0, elementsPerPage);
bottomToolBar.bind(loader);
}



The createGrid() and ColumnConfig() methods are in the post above.

The diference between my grid and yours in the linked page is that I have checkboxes in my grid. I did define my grid with single selection (grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
). Could it be a problem between the SelectionMode.SINGLE and the simple selection mode of the checkboxes (selectionModel.setSelectionMode(SelectionMode.SIMPLE);) ???? I just ramble a little.


Thank you very much for your help.

sven
29 Dec 2010, 4:19 AM
- The CheckBoxSelectionModel is not added as plugin to the grid
- Why do you call
selectionModel.bindGrid(grid); on your own?
- your CheckBoxSelectionModel is never set on the grid. Also you use SelectionModel.SIMPLE there

anasande
29 Dec 2010, 4:38 AM
In order to bind the checkboxes with the grid, and then obtain the selected row. Is it incorrect? Could the problem be there?

sven
29 Dec 2010, 4:39 AM
You should call
grid.setSelectionModel(mycheckboxselectionmodel);


Take a look at this example on how to use CheckBoxSelectionModel: http://www.sencha.com/examples/explorer.html#gridplugins

anasande
29 Dec 2010, 7:54 AM
I changed that and made some tests and I think it works fine now!!!!!!!!

Thank very very much Sven!!!!