PDA

View Full Version : Grid header width



kaushikGXT
22 Dec 2010, 8:41 AM
We have a Grid with fixed column widths defined, which is added to a Vertical Panel. When we remove the grid and add it back (same instance) the width of the column header seems to be changing and hence breaking the allignment.
The version of GXT being used is GXT 2.1.1.

Thank you

sven
22 Dec 2010, 8:46 AM
Have you sized your grid? How does your code look like?

kaushikGXT
22 Dec 2010, 12:03 PM
I am attaching excerpts from our code. Esentially we have a layout container in which we have added a Verticalpanel. In this panel by default we display the results in a list view. But the user has the ability to toggle between list and grid view which is made possible through a button.
Whenever the user toggles, the displayed view is removed from the panel and the other one added. Please look at the code and let us know

public class ResultsContainer extends LayoutContainer {

private VerticalPanel view;
private ListView<AwardModelBean> listView;
private Grid<AwardModelBean> grid;
private boolean loadGrid;

public ResultsContainer(boolean loadGrid){
this.loadGrid = loadGrid;
setId("resultPanelId");
setWidth("100%");
view = new VerticalPanel();
view.setId("viewId");
add(view);
add(this);
}

@Override
protected void onRender(Element parent, int index) {
// TODO Auto-generated method stub
super.onRender(parent, index);
loadList();
}

private void loadList(){
if (grid != null && grid.isAttached())
{
view.remove(grid);
}
if (listView == null)
{
prepareList();
} else {
listView.refresh();
}
view.add(listView);
view.layout();
}

private void loadGrid(){
if (grid == null)
{
prepareGrid();
} else {
grid.reconfigure(listStore, columnModel);
}
view.add(grid);
view.layout();
}

private void prepareGrid(){
boolean menuDisabled = true;
awdNumberColConf.setMenuDisabled(menuDisabled );
awdTitleColConf.setMenuDisabled(menuDisabled);
nsfOrgColConf.setMenuDisabled(menuDisabled);

awdNumberColConf.setWidth(70);
awdTitleColConf.setWidth(200);
nsfOrgColConf.setWidth(90);

columns.clear();
columns.add(awdNumberColConf);
columns.add(awdTitleColConf);
columns.add(nsfOrgColConf);
columns.add(relevanceColConf);

if (columnModel == null) {
columnModel = new ColumnModel(columns);
}

awdNumberColConf.setRenderer(new AwdIDTableCellRenderer());

awdTitleColConf.setRenderer(new AwdIDTableCellRenderer("title"));
nsfOrgColConf.setRenderer(new AwardSearchTableCellRenderer(
AwardSearchUIConstants.PARAM_URL_NSF_ORG, false));

grid = new Grid<AwardModelBean>(listStore, columnModel);
grid.setId("gridId");
grid.setStateId("pagingGridExample");
grid.setAutoHeight(true);
grid.setAutoWidth(false);
grid.setLoadMask(true);
grid.addStyleName("gridStyle");
}

}

sven
22 Dec 2010, 12:04 PM
Your grid has no width set. You need tp specifiy some width.

kaushikGXT
22 Dec 2010, 12:09 PM
Should the width of the grid be the sum of width of all the columns? or could it be somewhat larger than that?

sven
22 Dec 2010, 12:13 PM
Larger, you need to calculate fors scrollbar (if shown) paddings, borders etc.

kaushikGXT
22 Dec 2010, 12:36 PM
Setting the width of the grid did not help. Once we remove the grid and attach it back, the width of the column headers increased, shifting the header cells to the right and thus broke the alignment on the columns.

sven
22 Dec 2010, 12:39 PM
Please post a fully working testcase than that implements EntryPoint. I need to run your code myself and debug it.