PDA

View Full Version : Dynamically add column to grid



hphung
17 Jan 2012, 1:39 PM
Hello,

I was wondering if there is a way to dynamically create columns in an existing grid.

Take for example I have a checkbox-list with items A-Z. Then I have a grid where the first column is an ID column (int). What I want to be able to do is have the user check one or more items in the list and have that column be dynamically added to the grid. So if a user checked G and X, I want the grid to show ID, G, X for the columns.

Is there a simple way to do this somehow?

Any help is appreciated!

navandres
5 Jun 2012, 9:04 AM
Hi hphung,
You can do that by getting the ColumnModule and add a column to it. Then you have to make the grid know that you have made changes on it. You can do that user the recofigure method.

Here is an example:


public class GridExample extends LayoutContainer {

private ColumnModel cm;

@Override
protected void onRender(Element parent, int index) {
super.onRender(parent, index);
setLayout(new FlowLayout(10));
getAriaSupport().setPresentation(true);

final List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

final ListStore<BaseModel> store = new ListStore<BaseModel>();

cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(true);
cp.setHeading("Basic Grid");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(900, 600);

final Grid<BaseModel> grid = new Grid<BaseModel>(store, cm);
cp.add(grid);

cp.addButton(new Button("Add Column", new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
ColumnConfig column = new ColumnConfig();
column.setId("name");
column.setHeader("Company");
column.setWidth(200);
configs.add(column);
grid.getColumnModel().getColumns().add(column);
grid.getView().refresh(true);
}
}));

add(cp);
}
}

navandres
5 Jun 2012, 9:27 AM
If you know what are the columns you are going to have and are not too much, then you may want to add them all when you create the grid and then you can make them visible or invisible.

Try to add this button to the code above..


cp.addButton(new Button("Show/Hide first column", new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
ColumnConfig col = grid.getColumnModel().getColumn(0);
col.setHidden(!col.isHidden());
grid.getView().refresh(true);
}
}));

sven
7 Jun 2012, 10:48 AM
You should not change the property directly on the columnConfig, but rather over the ColumnModel (there is a setter too). This way the hiding/showing is directly handled in the GridView class and you do not need to refresh the hole view.

navandres
7 Jun 2012, 3:29 PM
I didn't pay attention to that, but you are right....

Thanks

sven
8 Jun 2012, 11:05 AM
Another info:

The grid class has a reconfigure method to change the bound store and columnmodel. You could use that one too to add columns (change the columnmodel).

dwms4915
21 May 2013, 12:26 PM
Hi Sven,

Is there a way that you can make the ColumnModel dynamic? I have a map with that I'd like to use to populate the list store