All about the Vaadin Grid Webinar

Is it possible to mark cells/colums as read-only, so that they are not editable in edit mode?

Got it working with:

grid.getColumn("propertyId").setEditable(false);

Is there a way to open the inline editor in a mobile device? In a desktop is a double-click, how I simulate that in a mobile browser?

I’m already using responsive design, Grid works ok in desktops, but I can’t find a solution in mobile(tried in android).

There’s unfortunately no good way of making all cells in a column show comboboxes since there’s no support for showing components in data cells. One thing you can do is to configure one column to use a combox box in the inline editor. Another approach might be to create a custom Renderer that puts a in the cell.

Please see this ticket:
https://dev.vaadin.com/ticket/17338
.

I’m new to Vaadin and still trying to figure out how edit mode in Grid works.

Currently I do have a Grid, which is getting it’s data from an external service. So when the Grid is initialized the data gets loaded and is bound to the Grid.

this.view.getGrid().setContainerDataSource(container); So far everything works fine.
But if I try to edit a row and hit save the editor closes and the new value doesn’t show. If I open it again every grid cell shows “null” and if I change it and hit save again I get a FieldGroup commitException saying: Property “digit1” not bound to datasource. Any suggestions what I may have done wrong?

After commit and want to call the save-method of my external service to . Do I have to use the commitHandler, like shown in the webinar or is there any other/better way?

Thanks for your help. Cheers, Dirk

The “Property not bound to datasource” problem could be solved. However I’m still stuck at the second part. Calling the external service. If I use the commitHandler with…

grid.getEditorFieldGroup().addCommitHandler(new CommitHandler() {... …and try to call my method in the postCommit method it doesn’t work. I can change the data in the grid row, click save and the data gets commited to the beanItemContainer. But the postCommit method is not entered…

Anyway. It seems to me that this is bad practise. Is there something like a BeanItemContainer change listener? Obviously it’s not magic I’m trying to do. Is there a best practise for this case?

Thanks for your help…

This is what I did for a similar problem : I remove the item and re-add it to the container
This was the only way I found to refresh the formula properties of my entity which are read only in the grid.

public void postCommit(FieldGroup.CommitEvent commitEvent) throws FieldGroup.CommitException {
  BusinessDataBean op = (BusinessDataBean) myDao.save(((BeanItem) commitEvent.getFieldBinder().getItemDataSource()).getBean());
  genericDao.refresh(op);
  businessDataBeanItemContainer.removeItem(op);
  businessDataBeanItemContainer.addBean(op);
}

I solved it. The problem was that I added the commitHandler before binding a datasource to the grid.

In the webinar you set the “customerField” to required and define a custom error message. Instead of going this way is it possible to…

  1. Use Bean Validation in Grid?
  2. Customize the standard error message? e.g. “Could not convert value to Byte”

Thanks

Leif Åstrand I tried with the editable grid. My sample code is:

List listaction=new ArrayList();
listaction.add(“Not Yet Started”);
listaction.add(“Started”);
listaction.add(“Finished”);

gridmain.addColumn(“Name”, String.class);
gridmain.addColumn(“Status”, String.class);
gridmain.addColumn(“Action”, String.class);
gridmain.addColumn(“Go”, String.class);
gridmain.addColumn(“Time”, Date.class);
gridmain.setEditorFieldGroup(getFieldGroup());

gridmain.getColumn(“Action”).setEditorField(
getComboBox(“Selection is required!”,listaction)
);

}
private FieldGroup getFieldGroup()
{
BeanFieldGroup beanFieldGroup = new BeanFieldGroup(NextPage.class);

beanFieldGroup.addCommitHandler(new CommitHandler()
{

private static final long serialVersionUID = 6062316515368687380L;

@Override
public void preCommit(CommitEvent commitEvent)

 throws CommitException {

}

@Override

public void postCommit(CommitEvent commitEvent)

 throws CommitException {

Notification.show("Saved Successfully!!",Notification.Type.TRAY_NOTIFICATION);

}

});

return beanFieldGroup;
}

public Field<?> getComboBox(String requiredErrorMsg, List<String> items) {

ComboBox comboBox = new ComboBox();

comboBox.setNullSelectionAllowed(false);

IndexedContainer container = new IndexedContainer(items);

comboBox.setContainerDataSource(container);

comboBox.setRequired(true);

comboBox.setRequiredError(requiredErrorMsg);

return comboBox;

}

}
It throws an exception that the property Action doesnt have data source.


With IE10: Selection of a grid cell in a large data set is not possible

It can be tested with your grid sampler → large data set. Here the Link:

http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid/large-dataset

(See also screenshot in attachment).

The selection of a grid cell or a row is not possible behind row number 1316. No problem by using Firefox.
We noticed the same problem with the example project of the Grid Webinar (loading 10000 rows instead of 1000 into the grid) and in a test project of us.

I already posted the problem in another forum category, but unfortunately I got no reply.
I would really appreciate, if someone could help me.

Thanks
Gerhard

19930.png

Hi all,

If someone can share me a code to make custom renderer for adding combo box in a colum of a grid , I will be very much thankful. I need to implement it in my university project.
Thanks

Showing a ComboBox component in each cell of a column is a very complicated operation because of implementation limitations. If the browser’s native select element is enough, then a simple JavaScript Renderer can be used. I’ve created an add-on doing exactly that:
https://vaadin.com/directory#!addon/selectrenderer
.

Hi,
i added a converter to a grid field, that converts a product id (short) into a product name (String) and back. Works fine. My problem is now that the column is filterable. Typing in the filter field filters, of course, the short values. But I want to filter the names. Should I append the same converter to the filter field? Any suggestions are welcome.
Here is my current code for adding the filter to the Grid:

for (final Object pid: containerPropertyIds) {
            HeaderCell cell = filterRow.getCell(pid);

            TextField filterField = new TextField();
            filterField.setColumns(8);
            
            filterField.addTextChangeListener(new TextChangeListener() {
                
                @Override
                public void textChange(TextChangeEvent event) {
                
                    gridContainer.removeContainerFilters(pid);
                    
                    if (! event.getText().isEmpty())
                        gridContainer.addContainerFilter(
                            new SimpleStringFilter(pid,
                                event.getText(), true, false));
                    
                }
            });
            cell.setComponent(filterField);

Solved it by adding a custom filter. - https://vaadin.com/book/-/page/datamodel.container.html#datamodel.container.filtered

Do you have in plan some pagination for Grid or that is already in place but I missed it? :slight_smile:

Grid does not need any specific features to support pagination - everything that is needed can just as well be implemented independently.

There are two aspects of pagination for Grid, Table or any other similar component. First there is a UI for the user to select which page to show, and then there is some logic that configures the Container used by Grid to only show the items that belong to that page.

What we could do is to document how you can achieve this and maybe even provide some helpers, but I don’t think there’s any need for adding any code to the Grid implementation for supporting pagination.

Thanks, I agree! For me, the best way to achieve this is something similar to paging component addon concept! Make your own component for showing next and previous n results from database, passing limit and offset in query every time you click next or previous button and of course keep tracking previous choices in that paging component.

And just one more question from webinar (sorry for late questions). You said there is no way to change height of rows in grid (you have edit and details rows instead). I tried with brute force CSS but that didn’t end up well :slight_smile: . So does this mean, that it is always supposed to be that one fixed height (according to theme compilation probably) and there is no something like add custom grid styles in Valo (with access to static strings in ValoTheme class to change it for example) ?

All rows in one Grid must have the same height since Grid uses yCoordinate / rowHeight for finding the row index for a specific position. Grid finds its row height during initialization by creating a dummy row and checking what dimensions the browser assign to it based on the CSS on the page. This means that different Grid instances in your application can have different row heights if you give them different style names and write some custom CSS for those style names.

         In filter table,if we click on table header the first row will automatically highlighted ,this action is coming by [b]

setselectable()
[/b] method present in filer table ,that action is not available in grid table .I want to apply that default action in grid table ,is there method available in grid table or any code change I have to make .Please provide solution for this

below is the code i am using in grid table::

private void buildPagedGrid(Class clazz) {
setWidth(“100%”);
setSelectionMode(SelectionMode.SINGLE);
setImmediate(true); setSizeFull();
setContainerDataSource(dataSource);
setFooterVisible(true)
;}