Vaadin Grid.addComponentColumn() not getting added in grid

I am moving from vaadin 7 to vaadin 8.1.0 for my web application. I am using vaadin Grid as a replacement for Table component.

But i am facing some issues related to adding component in grid as there is no simple method available as in vaadin Table in which we can add components using table.generatedColumn() method.

For grid i had tried it using grid.addComponentColumn() method but component columns are not getting added in grid as you can check in attached screenshot. Following is the code i used to popoulate grid with components.

Grid<User> grid = new Grid<User>("View Users");
grid.addStyleName("user-table");
grid.setWidth("100%");
grid.setItems(users);
grid.setRowHeight(40);
tableContainer.addComponent(grid);

grid.addComponentColumn(user -> {
    Label lblName = new Label(user.getFirstName());
    
    Image img = new Image();
    img.setSource(new ThemeResource("img/directoryUser.png"));
    img.setWidth("15px");
    img.setDescription("This user belongs to Active Directory");
    
    boolean aduser = user.isAuthenticateAgainstLDAP();
    
    return new HorizontalLayout(){
        {
            addComponent(lblName);
            setSpacing(true);
            if(aduser)
                addComponent(img);
        }
    };
}).setCaption("First Name").setExpandRatio(1);

grid.addColumn(user -> {
    return "LastName";//user.getLastName();
}).setCaption("Last Name").setExpandRatio(1);

/*grid.addColumn(user -> {
    return user.getUserName();
}).setCaption("User Name").setExpandRatio(1);*/

grid.addComponentColumn(user -> {
    String roles = "";
    List<UserRolesTable> list = userService.getUserRoles(user);
    if (list != null && list.size() > 0) {
        for (UserRolesTable userRolesTable : list) {
            if(userRolesTable != null){
                UserRoles role = factory.getRepository(UserRoles.class).findOne(userRolesTable.getRoleId());                            
                roles += (role != null) ? role.getDescription() + "<br>": "";
            }
        }
    } else {
        roles = user.getRoles() != null ? user.getRoles().getDescription() : "";
    }
    Label lblRoleName = new Label();
    lblRoleName.setValue(roles);
    lblRoleName.setContentMode(ContentMode.HTML);
    return lblRoleName;
}).setCaption("Roles").setExpandRatio(1);

grid.addColumn(user -> {
    return user.getLastLogonTime();
}).setCaption("Last Login Time").setExpandRatio(1);;

grid.addComponentColumn(user -> {
    AppUser appUser = factory.getRepository(AppUser.class).findOne(user.getId());
    CheckBox cb = new CheckBox();
    cb.setValue(appUser != null ? appUser.isAccountLocked() : false);
    cb.addValueChangeListener(new ValueChangeListener<Boolean>() {
        
        @Override
        public void valueChange(ValueChangeEvent<Boolean> event) {
            // TODO Auto-generated method stub
            appUser.setAccountLocked((Boolean) (event.getValue()));
            appUser.clearFailedLoginAttempts();
            Notify.get().show(appUser.getUsername()+ "'s Account "+ (((Boolean) (event.getValue())) ? "Disabled": "Enabled"), NotifyType.SUCCESS);
            userService.saveAppUser(appUser);
        }
    });
    
    return cb;
}).setCaption("Disable").setExpandRatio(1);

grid.addComponentColumn(user -> {
    
    Button editButton = new Button();
    editButton.addStyleName("no-border-no-bg-button");
    editButton.setIcon(VaadinIcons.EDIT);
    editButton.addClickListener(new ClickListener() {
        
        @Override
        public void buttonClick(ClickEvent event) {
            // TODO Auto-generated method stub
            userRoles = userService.getUserRoles(user);
            txtUsername.setValue(user.getUserName());
            setRoles(userRoles);
            txtFirstName.setValue(user.getFirstName());
            ldapAuthentication.setValue(user.isAuthenticateAgainstLDAP());
            txtLastName.setValue(user.getLastName());
            txtEmail.setValue(user.getEmailID());
            txtUsername.focus();
            cmbTitle.setValue(user.getTitle());
        }
    });
    return editButton;
    
}).setCaption("Edit").setExpandRatio(1);
        

40701.png

Looks like there’s something seriously weird going on. Component columns should work ok. Can you simplify your example down a lot? Currently it’s a bit hard to make out what is happening there. Try just having 1-2 columns with some dummy data.

-Olli

Olli thanks for the reply. I had tried it in separate project with simplyfied version and its working fine. But do not know why it is not working in my application.

Perhaps try working towards your version piece by piece and see at which point it breaks?

-Olli

Widgetset version can be an issue?

Yes, definitely. Make sure that you’ve compiled your widgetset properly.

-Olli