Column collapse and reordering feature in Grid component

General
1

Hi Vaadin Team,

Congratulations for your great work towards Grid component. It is so awesome. I want to use this component in my project for few screens. Intially I started my work with Filteringtable addon and my PM impressed with it. The inline editing feature and some other features in Grid component are so awesome. So I decided to migrate my screens from table to Grid. Now, I have to implement the column reordering and collapsing feature in Grid. Please suggest me how can I achieve this.

2

These features are already underway for the upcoming 7.5 release (see the
roadmap
). Reordering at least was already available in 7.5.0.alpha1, and I can’t remember off the top of my head if the collapsing was as well, but they are both in the nightly builds (7.5-SNAPSHOT) at least. Also, beta1 should be out in a few weeks if everything goes well.

3

Hi Anna,

Thanks for the info. I will give a try. :slight_smile:

4

Hi Anna,

I am able to get Vaadin 7.5.0.alph1 version maven project into my work environment. But I am not sure how to set column reordering properties to Grid. I couldnot find it in API also. Can you please post some sample snippet?

5

Hi!

Sorry about the delay, it’s been a hectic week and I completely forgot about your question when I didn’t have time to answer it right away. I’m not sure what reordering properties you meant, but this enables the reordering itself:

grid.setColumnReorderingAllowed(true);

and you can set the initial order with something like this:

grid.setColumnOrder("name", "phone", "email");
6

Hi

How to do column collapsing in Grid?

7

You can enable it for individual columns with

grid.getColumn(propertyId).setHidable(true);
8

Thank you:-)

9

Hi Vaadin Team,
I use a grid with two header lines. In the first line I join the first six columns. In addition, I hide the first two columns. As a result, I can move the last column in join area only two position to the left. I can not move the extreme right column all the way to the first position. The other non-jointed columns can also be moved by only two positions.

import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.ui.Grid;
import com.vaadin.ui.VerticalLayout;

class GridTest extends VerticalLayout {
  GridTest() {
  final Grid grid = new Grid();
  final BeanItemContainer container = new BeanItemContainer<MyObject>(MyObject.class);
  grid.setContainerDataSource(container);
  grid.setColumnReorderingAllowed(true);
  Grid.HeaderRow headerRow0 = grid.addHeaderRowAt(0);
  grid.getColumn("a").setHidden(true);
  grid.getColumn("b").setHidden(true); 
  Grid.HeaderCell join = headerRow0.join("a", "b", "c", "d", "e", "f"); 
  join.setText("A-B-C-D-E-F"); 
  addComponent(grid); 
} 

public static class MyObject {
  private String a;
  private String b;
  private String c;
  private String d;
  private String e;
  private String f;
  private String g;
  private String h;
  private String i;
  private String j;

public String getA() {
  return a;
}

public void setA(String a) {
  this.a = a;
}

public String getB() {
  return b;
}

public void setB(String b) {
  this.b = b;
}

public String getC() {
  return c;
}

public void setC(String c) {
  this.c = c;
}

public String getD() {
  return d;
}

public void setD(String d) {
  this.d = d;
}

public String getE() {
  return e;
}

public void setE(String e) {
  this.e = e;
}

public String getF() {
  return f;
}

public void setF(String f) {
  his.f = f;
}

public String getG() {
  return g;
}

public void setG(String g) {
  this.g = g;
}

public String getH() {
  return h;
}

public void setH(String h) {
  this.h = h;
}

public String getI() {
  return i;
}

public void setI(String i) {
  this.i = i;
}

public String getJ() {
  return j;
}

public void setJ(String j) {
  this.j = j;
}
}
}

How can I hide any of the columns and move the other columns unrestrictedly in a join group?
I could not find a reported bug on this topic.
Oh, yes I use Vaadin 7.7.6 version.