Vaadin - How to convert a Grid column which has boolean value to Checkbox

Question

I am using Vaadin 7.6.4 for my UI work. This has the following:-

I have a window which contains a grid with data in it. This window is actually a kind of a pop up[ which shows up when my main screen gets a click on the settings icon( not shown here). This is working fine( getting the UI screen to open the Vaadin window when the settings icon the main screen is clicked).
The problem is in showing the data as mentioned below.
This grid will have 4 columns for which the data comes from a bean container.
The first column is a boolean field with true/false getting displayed based on the data from the bean container.
I need to convert this boolean field column into a checkbox with true showing the field as a checkbox with a value selected. If the value is false, then show a checkbox which is not selected.
I am trying to do that as shown in the code below but I keep getting this checkbox name printed. I dont see the checkbox but the word "checkbox" printed in there?
This checkbox should be editable. The idea is that the user should be able to select some checkboxes and the ones selected should be shown in a panel ( not shown here). Thus, the checkbox has to be editable.

How do I fix this? The code for the window is shown below

package com.platform28.mybatis;

import java.util.List;

import com.vaadin.data.Item;
import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.data.util.GeneratedPropertyContainer;
import com.vaadin.data.util.PropertyValueGenerator;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
@SuppressWarnings("serial")
public class ConfigPopUp extends Window {
VaadinUtils vaadinUtils = null;

public ConfigPopUp(List<TableColumnData> tblDataLst) {
    vaadinUtils = new VaadinUtils();

    // Some basic content for the window
    VerticalLayout configLayout = new VerticalLayout();
    configLayout.addComponent(new Label("Settings"));
    configLayout.setMargin(true);
    //configLayout.setWidth(null);;
    setContent(configLayout);
    //adding grid.
    List<SettingsColumnData> settingsList = vaadinUtils.processSettingsList(tblDataLst);
    final BeanItemContainer<SettingsColumnData> gridDataSource = new BeanItemContainer<SettingsColumnData>(SettingsColumnData.class, settingsList);

    //change boolean value to checkbox.
    GeneratedPropertyContainer gp = new GeneratedPropertyContainer(gridDataSource);
    gp.addGeneratedProperty("columnDisplayed", new PropertyValueGenerator<CheckBox>() {

        @Override
        public CheckBox getValue(Item item, Object itemId, Object propertyId) {
            boolean currentCheckBoxValue = (boolean) item.getItemProperty("columnDisplayed").getValue();
            CheckBox chkBox = new CheckBox();
            chkBox.setValue(currentCheckBoxValue);
            return chkBox;
        }

        @Override
        public Class<CheckBox> getType() {
            return CheckBox.class;
        }
    });



    Grid settingsGrid = new Grid(gp);
    settingsGrid.setWidth("100%");
    settingsGrid.setSizeFull();
    settingsGrid.setColumnOrder("columnDisplayed", "columnName","columnShortName","columnDescription");
    configLayout.addComponent(settingsGrid);
    //configLayout.setExpandRatio(settingsGrid, 1);

    // Disable the close button
    setClosable(false);

    HorizontalLayout hLayout = new HorizontalLayout();
    hLayout.setSpacing(true);
    hLayout.setMargin(true);

    // Trivial logic for closing the sub-window
    Button ok = new Button("Ok");
    ok.addClickListener(new ClickListener() {
        public void buttonClick(ClickEvent event) {
            close(); // Close the sub-window
        }
    });
    hLayout.addComponent(ok);

    // Trivial logic for closing the sub-window
    Button cancelBtn = new Button("Cancel");
    cancelBtn.addClickListener(new ClickListener() {
        public void buttonClick(ClickEvent event) {
            close(); // Close the sub-window
        }
    });
    hLayout.addComponent(cancelBtn);

    configLayout.addComponent(hLayout);

    // set pop up to center.
    center();
    // should be resizable
    setResizable(true);
    // should not be draggable
    setDraggable(false);
    //set it as modal window
    setModal(true);

    setWidth("50%");

    setHeight("75%");

}

}

The `CheckboxRenderer` from the [grid-renderers-collection-for-vaadin7](https://vaadin.com/directory#!addon/grid-renderers-collection-for-vaadin7) seems to do what you want, although in my tests it had a weird behaviour when editing. Perhaps you can get some inspiration from the [sources](https://github.com/vaadin/grid-renderers-collection-addon) and create your own renderer which behaves just like you want. As an alternative you can take a look at [the component renderer](https://vaadin.com/directory#!addon/componentrenderer) addon which decorates the grid with renderers for components. — Morfic, Mar 18 '16 at 14:23
thanks for the help. However, we ended up using the SelectionMode.MULTI option — jbdundas, Apr 06 '16 at 13:30

score 1 · Accepted Answer · answered Mar 18 '16 at 16:02

Ok, we used the SelectionMode.MULTI to show the selection of rows in there. https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/demo/selection.html

Still, I would love to learn more as to how we get the change done as shown in the question above.

Still looking for an answer to that.

score 1 · Answer 2 · answered Sep 05 '17 at 07:58

1

Use a Renderer and a Converter, you don't need to use SelectionMode.MULTI.

An example of this is posted here.

answered Sep 05 '17 at 07:58

Víctor Gómez

724
6
23

Vaadin - How to convert a Grid column which has boolean value to Checkbox

2 Answers2