Vaadin grid size not changing

I am trying to display a list of items inside grid component of Vaadin framework. By default the size of grid is coming very small. It is not showing all column names. I need to scroll to see all the column. My grid has only 10 columns. It is not changing as per data in list.
I tried to set size of grid by following methods.
1. this.grid.setHeightByRows(list.size());
2. this.grid.setSizeUndefined();
3. this.grid.setSizeFull();
Non of the above ways were able to set the size as per data

Please find below the code:

private Grid createGridTable() {
Grid grid = new Grid();
grid.addColumn(PrevYearConsumption::getPreviousPeriod).setCaption(PrevYearConstants.PREVIOUS_PERIOD);
grid.addColumn(PrevYearConsumption::getPresentReading).setCaption(“Prev Elec”);
grid.addColumn(PrevYearConsumption::getPreviousDataComplete)
.setCaption(PrevYearConstants.PREVIOUS_DATA_COMPLETE);
grid.addColumn(PrevYearConsumption::getPreviousDq).setCaption(PrevYearConstants.PREVIOUS_DQ);
grid.addColumn(PrevYearConsumption::getPresentPeriod).setCaption(PrevYearConstants.PRESENT_PERIOD);
grid.addColumn(PrevYearConsumption::getPresentReading).setCaption(“Present Elec”);
grid.addColumn(PrevYearConsumption::getPresentDataComplete).setCaption(PrevYearConstants.PRESENT_DATA_COMPLETE);
grid.addColumn(PrevYearConsumption::getPresentDq).setCaption(PrevYearConstants.PRESENT_DQ);
grid.addColumn(PrevYearConsumption::getDiff).setCaption(PrevYearConstants.DIFFERENCE);
grid.addColumn(PrevYearConsumption::getPercentageChange).setCaption(PrevYearConstants.PERCENTAGE);
grid.setSizeUndefined();
return grid;
}

Inside View class (I have copied a part of code to explain my issue ):

public class viewClass{
private HorizontalLayout tableLayout = new HorizontalLayout();

public void method ()
{
this.grid = createGridTable();
this.tableLayout.setSizeFull();
this.tableLayout.addComponent(this.grid);
List list = getList();
this.grid.setItems(list);
}

}

Please help me here.

private Grid createGrid() {
    final Grid<PrevYearConsumption> grid = new Grid<>();
	grid.setWidth("100%");
	grid.addColumn(PrevYearConsumption::getPreviousPeriod).setCaption("Caption").setWidth(100);
	// Add the rest of the columns etc.
	return grid;
}

You can specify the width of each column in pixels like above.
Or you can call setWidthUndefined() on the column and Vaadin will decide how wide each column is based on the data passed in.

I tried below approach :

Grid<PrevYearConsumption> grid = new Grid<PrevYearConsumption>();
		grid.addColumn(PrevYearConsumption::getPreviousPeriod).setCaption(PrevYearConstants.PREVIOUS_PERIOD).setWidthUndefined();

setting widht to undefined for each column it did not have any impact on size of grid.
I have attached the screenshot as well.

how can we change the default size of grid generated ?

17881260.png

You missed the most important part.

grid.setWidth(“100%”);

according to the original post, they tried grid.setSizeFull() which includes grid.setWidth("100%");.

There must be some parent layout of the grid that is not set to full width. I can see there is a call to this.tableLayout.setSizeFull() so it must be another layout, or the component that the viewClass extends directly.

You’re probably right. But in the attached image, the Chart component is displaying at full size. And in the quoted code it says grid.setWidthUndefined(); It’s possible they’re trying to set the size in multiple places and it’s causing problems

There are three horizontal layouts on the page

  1. One for input fields
  2. one for chart
  3. last one for grid

both input layout and chart are coming with proper widht only grid is not coming properly.
If i set the size of all layout as undefined… will that work ?

Is there any way i can put everything in one layout ? My input field part will grow horizontally and grid will grow vertically.
Please find attached the screenshot for the same.The grid is bigger because i changed the size value in developer tool for the grid. Let me know if you need any more explanation for this issue.

17882148.png

VerticalLayout wrapper = new VerticalLayout();
wrapper.setWidth("100%");

HorizontalLayout filters = new HorizontalLayout();
filters.setWidth("100%");
// Add Filter Components..

Chart chart = new Chart(ChartType.COLUMN);
chart.setWidth("100%");
// Chart configuration..

Grid<PrevYearConsumption> grid = new Grid<>();
grid.setWidth("100%");
// Grid configuration

wrapper.addComponents(filters, chart, grid);

This gives me 3 equal width components stacked on top of one another. Hopefully it helps…